diff --git a/src/scss/_note.scss b/src/scss/_note.scss
index 6931db09..06636a30 100644
--- a/src/scss/_note.scss
+++ b/src/scss/_note.scss
@@ -29,22 +29,22 @@
         }
     }
 
-    // @todo replace with variables
+    @function svg-factory($fill-color) {
+        @return 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="' +
+            $fill-color +
+            '"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E';
+    }
 
-    $colors: (
-        yfm-accent-info: #027bf3,
-        yfm-accent-tip: #56bd67,
-        yfm-accent-warning: #f19518,
-        yfm-accent-alert: #ff4645,
+    $noteIcons: (
+        yfm-accent-info: svg-factory(var(--yfm-color-accent)),
+        yfm-accent-tip: svg-factory(var(--yfm-color-note-tip)),
+        yfm-accent-alert: svg-factory(var(--yfm-color-note-important)),
+        yfm-accent-warning: svg-factory(var(--yfm-color-note-warning)),
     );
 
-    @each $type, $color in $colors {
-        &.#{$type} > :first-child::before {
-            $r: red($color);
-            $g: green($color);
-            $b: blue($color);
-            $rgbColor: 'rgb(' + $r + ',' + $g + ',' + $b + ')';
-            content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="' + $rgbColor + '"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
+    @each $type, $noteIcon in $noteIcons {
+        &.#{$type} > p:first-child::before {
+            content: url($noteIcon);
         }
     }