diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index 9e45ed52163..e2084e8f85f 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -1,62 +1,48 @@
 .ci-status-icon-success,
 .ci-status-icon-passed {
-  &,
-  &:hover,
-  &:focus {
-    color: $green-500;
+  svg {
+    fill: $green-500;
   }
 }
 
 .ci-status-icon-failed {
-  &,
-  &:hover,
-  &:focus {
-    color: $gl-danger;
+  svg {
+    fill: $gl-danger;
   }
 }
 
 .ci-status-icon-pending,
 .ci-status-icon-failed_with_warnings,
 .ci-status-icon-success_with_warnings {
-  &,
-  &:hover,
-  &:focus {
-    color: $orange-500;
+  svg {
+    fill: $orange-500;
   }
 }
 
 .ci-status-icon-running {
-  &,
-  &:hover,
-  &:focus {
-    color: $blue-400;
+  svg {
+    fill: $blue-400;
   }
 }
 
 .ci-status-icon-canceled,
 .ci-status-icon-disabled,
 .ci-status-icon-not-found {
-  &,
-  &:hover,
-  &:focus {
-    color: $gl-text-color;
+  svg {
+    fill: $gl-text-color;
   }
 }
 
 .ci-status-icon-created,
 .ci-status-icon-skipped {
-  &,
-  &:hover,
-  &:focus {
-    color: $gray-darkest;
+  svg {
+    fill: $gray-darkest;
   }
 }
 
 .ci-status-icon-manual {
-  &,
-  &:hover,
-  &:focus {
-    color: $gl-text-color;
+  svg {
+    fill: $gl-text-color;
   }
 }