diff --git a/src/css/themes/blue.scss b/src/css/themes/blue.scss
index c215d5239..31c08f031 100644
--- a/src/css/themes/blue.scss
+++ b/src/css/themes/blue.scss
@@ -2,6 +2,7 @@
 @import "blue/pages/SurahIndex";
 @import "blue/pages/SurahStream";
 @import "blue/components/Select";
+@import "blue/components/Icon";
 
 .root .content.theme.blue.ar {
   direction: rtl;
diff --git a/src/css/themes/blue/components/_Icon.scss b/src/css/themes/blue/components/_Icon.scss
index cc63cabad..d4ddf2961 100644
--- a/src/css/themes/blue/components/_Icon.scss
+++ b/src/css/themes/blue/components/_Icon.scss
@@ -1,31 +1,36 @@
+.content.theme.blue {
+  @import "themes/blue/colors";
 
-.play.icon {
-  fill: $blue1;
-  stroke: darken($blue1, 40%);
-  stroke-width: 2px;
-}
+  .footer {
+    .play.icon {
+      fill: $blue1;
+      stroke: darken($blue1, 40%);
+      stroke-width: 2px;
+    }
 
-.pause.icon {
-  background: unset;
-  rect {
-    fill: $blue1;
-    stroke: darken($blue1, 40%);
-    stroke-width: 1px;
-  }
-}
-
-.refresh.icon {
-  background: unset;
-  fill: $blue1;
-}
-
-.stalled.icon {
-  div { background: $gold2; }
-}
-
-.sound-on.icon, .sound-off.icon {
-  polygon {
-    fill: $blue1;
-    stroke-width: 2;
+    .pause.icon {
+      background: unset;
+      rect {
+        fill: $blue1;
+        stroke: darken($blue1, 40%);
+        stroke-width: 1px;
+      }
+    }
+
+    .refresh.icon {
+      background: unset;
+      fill: $blue1;
+    }
+
+    .stalled.icon {
+      div { background: $gold2; }
+    }
+
+    .sound-on.icon, .sound-off.icon {
+      polygon {
+        fill: $blue1;
+        stroke-width: 2;
+      }
+    }
   }
 }
diff --git a/src/css/themes/blue/pages/_SurahStream.scss b/src/css/themes/blue/pages/_SurahStream.scss
index 8f76c7582..62220923c 100644
--- a/src/css/themes/blue/pages/_SurahStream.scss
+++ b/src/css/themes/blue/pages/_SurahStream.scss
@@ -1,6 +1,5 @@
 .root .content.theme.blue {
   @import "themes/blue/colors";
-  @import "themes/blue/components/Icon";
 
   .row.details {
     color: $gold1;
diff --git a/src/css/themes/green.scss b/src/css/themes/green.scss
index 61d1a910f..b44102fe4 100644
--- a/src/css/themes/green.scss
+++ b/src/css/themes/green.scss
@@ -2,6 +2,7 @@
 @import "green/pages/SurahIndex";
 @import "green/pages/SurahStream";
 @import "green/components/Select";
+@import "themes/green/components/Icon";
 
 .root .content.theme.green.ar {
   direction: rtl;
diff --git a/src/css/themes/green/components/_Icon.scss b/src/css/themes/green/components/_Icon.scss
index 9e0f30aa6..20e3a80b0 100644
--- a/src/css/themes/green/components/_Icon.scss
+++ b/src/css/themes/green/components/_Icon.scss
@@ -1,24 +1,32 @@
-.footer {
-  .play.icon {
-    background: unset;
-    g path {
-      fill: $green1;
-      stroke: $green1;
-      stroke-width: 3px;
-    }
-  }
+.content.theme.green {
+  @import "themes/green/colors";
 
-  .pause.icon {
-    background: unset;
-    g rect {
-      fill: $green1;
-      stroke: $green1;
-      stroke-width: 1px;
+  .footer {
+    .play.icon {
+      background: unset;
+      g path {
+        fill: $green1;
+        stroke: $green1;
+        stroke-width: 3px;
+      }
     }
-  }
 
-  .refresh.icon {
-    background: unset;
-    fill: $green1;
+    .pause.icon {
+      background: unset;
+      g rect {
+        fill: $green1;
+        stroke: $green1;
+        stroke-width: 1px;
+      }
+    }
+
+    .refresh.icon {
+      background: unset;
+      fill: $green1;
+    }
+
+    .stalled.icon {
+      div { background: $green1; }
+    }
   }
 }
diff --git a/src/css/themes/green/pages/_SurahStream.scss b/src/css/themes/green/pages/_SurahStream.scss
index 3df27d362..13407fac4 100644
--- a/src/css/themes/green/pages/_SurahStream.scss
+++ b/src/css/themes/green/pages/_SurahStream.scss
@@ -1,6 +1,5 @@
 .root .content.theme.green {
   @import "themes/green/colors";
-  @import "themes/green/components/Icon";
 
   .row.details {
     color: $green1;