diff --git a/src/scss/utility-mixins/background.scss b/src/scss/utility-mixins/background.scss
index cdb792782641c411920a28608bd16ff5fee01975..30e2966a538f661ddf5ea2bf70cfaae1330f048f 100644
--- a/src/scss/utility-mixins/background.scss
+++ b/src/scss/utility-mixins/background.scss
@@ -387,15 +387,15 @@
 * naming convention: gl-bg-{image-name}
 */
 @mixin gl-bg-chevron-left {
-  background-image: url($gl-icon-chevron-left);
+  background-image: url('#{$gl-icon-chevron-left}');
 }
 
 @mixin gl-bg-chevron-right {
-  background-image: url($gl-icon-chevron-right);
+  background-image: url('#{$gl-icon-chevron-right}');
 }
 
 @mixin gl-bg-chevron-down {
-  background-image: url($gl-icon-chevron-down);
+  background-image: url('#{$gl-icon-chevron-down}');
 }
 
 /**
diff --git a/src/scss/utility-mixins/masks.scss b/src/scss/utility-mixins/masks.scss
index c14fdea1d0d8e08deec077a5ea63b18f07ffc737..68d7b2f34b0f75ddb6fcc8d99b4f0d909135e353 100644
--- a/src/scss/utility-mixins/masks.scss
+++ b/src/scss/utility-mixins/masks.scss
@@ -1,5 +1,5 @@
 @mixin gl-mask-chevron-down {
-  mask-image: url($gl-icon-chevron-down);
+  mask-image: url('#{$gl-icon-chevron-down}');
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: cover;