diff --git a/scss/_zotero.scss b/scss/_zotero.scss
index 513cde52a6..af685f533e 100644
--- a/scss/_zotero.scss
+++ b/scss/_zotero.scss
@@ -3,10 +3,10 @@
 
 @import "abstracts/variables";
 @import "abstracts/functions";
-@import "abstracts/mixins";
 @import "abstracts/placeholders";
 @import "abstracts/utilities";
 @import "abstracts/split-button";
+@import "abstracts/svgicon";
 
 :root {
     color-scheme: light dark;
diff --git a/scss/abstracts/_mixins.scss b/scss/abstracts/_mixins.scss
deleted file mode 100644
index 995634ea35..0000000000
--- a/scss/abstracts/_mixins.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-//
-// Mixins
-// --------------------------------------------------
-
-@mixin svgicon($icon, $color, $size: "16", $prefix: false, $has2x: false) {
-    @if $has2x {
-        @if $prefix {
-            background-image: image-set(url('chrome://zotero/skin/#{$prefix}/#{$size}/#{$color}/#{$icon}.svg') 1x,
-                url('chrome://zotero/skin/#{$prefix}/#{$size}/#{$color}/#{$icon}@2x.svg') 2x);
-        }
-
-        @else {
-            background-image: image-set(url('chrome://zotero/skin/#{$size}/#{$color}/#{$icon}.svg') 1x,
-                url('chrome://zotero/skin/#{$size}/#{$color}/#{$icon}@2x.svg') 2x);
-        }
-    }
-
-    @else {
-        @if $prefix {
-            background-image: url('chrome://zotero/skin/#{$prefix}/#{$size}/#{$color}/#{$icon}.svg');
-        }
-
-        @else {
-            background-image: url('chrome://zotero/skin/#{$size}/#{$color}/#{$icon}.svg');
-        }
-    }
-}
\ No newline at end of file
diff --git a/scss/abstracts/_svgicon.scss b/scss/abstracts/_svgicon.scss
new file mode 100644
index 0000000000..0c421b67e1
--- /dev/null
+++ b/scss/abstracts/_svgicon.scss
@@ -0,0 +1,37 @@
+@mixin svgicon($icon, $color, $size: "16", $prefix: false, $has2x: false) {
+    background:
+        -make-icon-background($icon, $color, $size, $prefix, $has2x),
+        
+        // Invisible backgrounds to preload all variants:
+        -make-icon-background($icon, 'white', $size, $prefix, $has2x) center/0,
+        -make-icon-background($icon, 'light', $size, $prefix, $has2x) center/0,
+        -make-icon-background($icon, 'dark', $size, $prefix, $has2x) center/0;
+}
+
+@function -make-icon-background($icon, $color, $size, $prefix, $has2x) {
+    @if $has2x {
+        @if $prefix {
+            @return image-set(
+                url('chrome://zotero/skin/#{$prefix}/#{$size}/#{$color}/#{$icon}.svg') 1x,
+                url('chrome://zotero/skin/#{$prefix}/#{$size}/#{$color}/#{$icon}@2x.svg') 2x
+            );
+        }
+
+        @else {
+            @return image-set(
+                url('chrome://zotero/skin/#{$size}/#{$color}/#{$icon}.svg') 1x,
+                url('chrome://zotero/skin/#{$size}/#{$color}/#{$icon}@2x.svg') 2x
+            );
+        }
+    }
+
+    @else {
+        @if $prefix {
+            @return url('chrome://zotero/skin/#{$prefix}/#{$size}/#{$color}/#{$icon}.svg');
+        }
+
+        @else {
+            @return url('chrome://zotero/skin/#{$size}/#{$color}/#{$icon}.svg');
+        }
+    }
+}