diff --git a/chrome/content/zotero/components/icons.jsx b/chrome/content/zotero/components/icons.jsx
index 75265f7d06..c9ebc938ba 100644
--- a/chrome/content/zotero/components/icons.jsx
+++ b/chrome/content/zotero/components/icons.jsx
@@ -217,4 +217,18 @@ module.exports.getDOMElement = function (icon) {
 	div.innerHTML = renderToStaticMarkup(React.createElement(module.exports[icon]));
 	domElementCache[icon] = div.firstChild;
 	return domElementCache[icon].cloneNode(true);
-}
\ No newline at end of file
+};
+
+let cssIconsCache = new Map();
+
+module.exports.getCSSIcon = function (key) {
+	if (!cssIconsCache.has(key)) {
+		let iconEl = document.createElement('span');
+		iconEl.classList.add('icon');
+		iconEl.classList.add('icon-css');
+		iconEl.classList.add(key);
+		cssIconsCache.set(key, iconEl);
+	}
+
+	return cssIconsCache.get(key).cloneNode(true);
+};
\ No newline at end of file
diff --git a/scss/abstracts/_mixins.scss b/scss/abstracts/_mixins.scss
index 1727403388..995634ea35 100644
--- a/scss/abstracts/_mixins.scss
+++ b/scss/abstracts/_mixins.scss
@@ -2,3 +2,26 @@
 // 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