diff --git a/common/static/sass/_builtin-block-variables.scss b/common/static/sass/_builtin-block-variables.scss
index de56cd196c48..1274c28bca57 100644
--- a/common/static/sass/_builtin-block-variables.scss
+++ b/common/static/sass/_builtin-block-variables.scss
@@ -35,6 +35,8 @@
     --danger: $danger;
     --darkGrey: $darkGrey;
     --error-color: $error-color;
+    --error-color-dark: darken($error-color, 11%);
+    --error-color-light: lighten($error-color, 25%);
     --font-bold: $font-bold;
     --font-family-sans-serif: $font-family-sans-serif;
     --general-color-accent: $general-color-accent;
@@ -45,6 +47,12 @@
     --gray-l3: $gray-l3;
     --gray-l4: $gray-l4;
     --gray-l6: $gray-l6;
+    --icon-correct: url($static-path + '/images/correct-icon.png');
+    --icon-incorrect: url($static-path + '/images/incorrect-icon.png');
+    --icon-info: url($static-path + '/images/info-icon.png');
+    --icon-partially-correct: url($static-path + '/images/partially-correct-icon.png');
+    --icon-spinner: url($static-path + '/images/spinner.gif');
+    --icon-unanswered: url($static-path + '/images/unanswered-icon.png');
     --incorrect: $incorrect;
     --lightGrey: $lightGrey;
     --lighter-base-font-color: $lighter-base-font-color;
diff --git a/xmodule/assets/capa/_display.scss b/xmodule/assets/capa/_display.scss
index 1d8a09b12409..82fa244b8e04 100644
--- a/xmodule/assets/capa/_display.scss
+++ b/xmodule/assets/capa/_display.scss
@@ -143,7 +143,7 @@ iframe[seamless] {
 }
 
 .inline-error {
-  color: darken($error-color, 11%);
+  color: var(--error-color-dark);
 }
 
 div.problem-progress {
@@ -517,7 +517,7 @@ div.problem {
         top: 4px;
         width: 14px;
         height: 14px;
-        background: url('#{var(--static-path)}/images/unanswered-icon.png') center center no-repeat;
+        background: var(--icon-unanswered) center center no-repeat;
       }
 
       &.processing, &.ui-icon-processing {
@@ -526,7 +526,7 @@ div.problem {
         top: 6px;
         width: 25px;
         height: 20px;
-        background: url('#{var(--static-path)}/images/spinner.gif') center center no-repeat;
+        background: var(--icon-spinner) center center no-repeat;
       }
 
       &.ui-icon-check {
@@ -535,7 +535,7 @@ div.problem {
         top: 3px;
         width: 25px;
         height: 20px;
-        background: url('#{var(--static-path)}/images/correct-icon.png') center center no-repeat;
+        background: var(--icon-correct) center center no-repeat;
       }
 
       &.incomplete, &.ui-icon-close {
@@ -544,7 +544,7 @@ div.problem {
         top: 3px;
         width: 20px;
         height: 20px;
-        background: url('#{var(--static-path)}/images/incorrect-icon.png') center center no-repeat;
+        background: var(--icon-incorrect) center center no-repeat;
       }
     }
 
@@ -574,7 +574,7 @@ div.problem {
       .grading {
         margin: 0px 7px 0 0;
         padding-left: 25px;
-        background: url('#{var(--static-path)}/images/info-icon.png') left center no-repeat;
+        background: var(--icon-info) left center no-repeat;
         text-indent: 0px;
       }
 
@@ -1239,7 +1239,7 @@ div.problem {
 
   div.capa_reset {
     padding: 25px;
-    background-color: lighten($error-color, 25%);
+    background-color: var(--error-color-light);
     border: 1px solid var(--error-color);
     border-radius: 3px;
     font-size: 1em;
@@ -1371,7 +1371,7 @@ div.problem {
         .result-errors {
           margin: calc((var(--baseline)/4));
           padding: calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)*2));
-          background: url('#{var(--static-path)}/images/incorrect-icon.png') center left no-repeat;
+          background: var(--icon-incorrect) center left no-repeat;
 
           li {
             color: #b00;
@@ -1403,7 +1403,7 @@ div.problem {
         }
 
         .result-correct {
-          background: url('#{var(--static-path)}/images/correct-icon.png') left 20px no-repeat;
+          background: var(--icon-correct) left 20px no-repeat;
 
           .result-actual-output {
             color: #090;
@@ -1411,7 +1411,7 @@ div.problem {
         }
 
         .result-partially-correct {
-          background: url('#{var(--static-path)}/images/partially-correct-icon.png') left 20px no-repeat;
+          background: var(--icon-partially-correct) left 20px no-repeat;
 
           .result-actual-output {
             color: #090;
@@ -1419,7 +1419,7 @@ div.problem {
         }
 
         .result-incorrect {
-          background: url('#{var(--static-path)}/images/incorrect-icon.png') left 20px no-repeat;
+          background: var(--icon-incorrect) left 20px no-repeat;
 
           .result-actual-output {
             color: #b00;
@@ -1647,7 +1647,7 @@ div.problem {
       &::after {
         @include margin-left(calc((var(--baseline)*0.75)));
 
-        content: url('#{var(--static-path)}/images/correct-icon.png');
+        content: var(--icon-correct);
       }
     }