diff --git a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss
index de533283d..38bf67187 100644
--- a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss
+++ b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss
@@ -15,14 +15,14 @@ page-addon-mod-quiz-navigation-modal {
     }
 
     .item.core-question-correct .item-inner {
-        background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23394e00'/></svg>") !important;
+        @include push-arrow-color($core-question-correct-color);
     }
 
     .item.core-question-incorrect .item-inner {
-        background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23cb3d4d'/></svg>") !important;
+        @include push-arrow-color($core-question-incorrect-color);
     }
 
     .item.core-question-answersaved .item-inner {
-        background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%233a3a3a'/></svg>") !important;
+        @include push-arrow-color($text-color);
     }
 }
diff --git a/src/app/app.scss b/src/app/app.scss
index a0a5cd0e8..9642143e8 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -69,7 +69,6 @@
   }
 }
 
-
 // Define an alternative way to set a heading in an item without using a heading tag.
 // This is done for accessibility reasons when a heading is semantically incorrect.
 .item .item-heading {
@@ -475,6 +474,7 @@ ion-col ion-select {
   background-color: $core-question-state-incorrect-color;
 }
 .core-question-answersaved {
+  color: $text-color;
   background-color: $core-question-saved-color-bg;
 }
 
@@ -671,7 +671,7 @@ canvas[core-chart] {
 
 
 .core-white-push-arrow .item-inner{
-    background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23FFFFFF'/></svg>") !important;
+    @include push-arrow-color($white);
 }
 
 // For list where some items have detail icon and some others don't.
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 1faf3f57d..0ec8c8555 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -250,6 +250,10 @@ $core-question-state-incorrect-color: $red-light !default;
     transition: $where $time ease-in-out;
 }
 
+@mixin push-arrow-color($color) {
+  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$color}'/></svg>") !important;
+}
+
 // Font Awesome
 $fa-font-path: $font-path;
 @import "font-awesome";