diff --git a/client/styles/abstracts/_mixins.scss b/client/styles/abstracts/_mixins.scss
index 54b836ec..1e6f2c52 100644
--- a/client/styles/abstracts/_mixins.scss
+++ b/client/styles/abstracts/_mixins.scss
@@ -16,4 +16,24 @@
       $theme-map: null !global;
     }
   }
+}
+
+@mixin icon() {
+  @include themify() {
+    color: getThemifyVariable('icon-color');
+    & g {
+      fill: getThemifyVariable('icon-color');
+    }
+    &:hover {
+      color: getThemifyVariable('icon-hover-color');
+      & g {
+        opacity: 1;
+        fill: getThemifyVariable('icon-hover-color');
+      }
+    }
+  }
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
 }
\ No newline at end of file
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 8c6ce582..ec837235 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -31,26 +31,6 @@
 	}
 }
 
-%icon {
-	@include themify() {
-		color: getThemifyVariable('icon-color');
-		& g {
-			fill: getThemifyVariable('icon-color');
-		}
-		&:hover {
-			color: getThemifyVariable('icon-hover-color');
-			& g {
-				opacity: 1;
-				fill: getThemifyVariable('icon-hover-color');
-			}
-		}
-	}
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-	padding: 0;
-}
-
 %icon-toast{
 	@include themify() {
 		color: $toast-text-color
diff --git a/client/styles/components/_about.scss b/client/styles/components/_about.scss
index 4cd4ea4e..1ca80ea2 100644
--- a/client/styles/components/_about.scss
+++ b/client/styles/components/_about.scss
@@ -25,9 +25,7 @@
 }
 
 .about__exit-button {
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
 }
 
 .about__logo {
diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss
index 93a55dcd..9ed29fc7 100644
--- a/client/styles/components/_console.scss
+++ b/client/styles/components/_console.scss
@@ -72,9 +72,7 @@
 
 .preview-console__collapse {
 	padding-top: #{3 / $base-font-size}rem;
-	@include themify() {
-		@extend %icon;
-	}
+	@include icon();
 	.preview-console--collapsed & {
 		display: none;
 	}
@@ -82,9 +80,7 @@
 
 .preview-console__expand {
 	padding-top: #{3 / $base-font-size}rem;
-	@include themify() {
-		@extend %icon;
-	}
+	@include icon();
 	display: none;
 	.preview-console--collapsed & {
 		display: inline-block;
diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index 6b460d9c..75647316 100644
--- a/client/styles/components/_editor.scss
+++ b/client/styles/components/_editor.scss
@@ -187,9 +187,7 @@
   width: 14px;
   height: 14px;
 
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
 
   background-repeat: no-repeat;
   background-position: center;
@@ -231,9 +229,7 @@
 
   margin-left: #{8 / $base-font-size}rem;
 
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
 
   background: transparent url(../images/exit.svg) no-repeat;
 }
@@ -249,9 +245,7 @@
 }
 
 .editor__options-button {
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
   position: absolute;
   top: #{10 / $base-font-size}rem;
   right: #{2 / $base-font-size}rem;
diff --git a/client/styles/components/_error-modal.scss b/client/styles/components/_error-modal.scss
index 35eb940f..f20f05a5 100644
--- a/client/styles/components/_error-modal.scss
+++ b/client/styles/components/_error-modal.scss
@@ -12,9 +12,7 @@
 }
 
 .error-modal__exit-button {
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
 }
 
 .error-modal__content {
diff --git a/client/styles/components/_modal.scss b/client/styles/components/_modal.scss
index 0999c89c..470509af 100644
--- a/client/styles/components/_modal.scss
+++ b/client/styles/components/_modal.scss
@@ -22,9 +22,7 @@
 }
 
 .modal__exit-button {
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
 }
 
 .modal__header {
@@ -96,9 +94,7 @@
 }
 
 .keyboard-shortcuts__close {
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
 }
 
 .keyboard-shortcut-item {
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index f4938d3f..d45adebb 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -17,9 +17,7 @@
 }
 
 .preferences__exit-button {
-	@include themify() {
-		@extend %icon;
-	}
+	@include icon();
 	padding-top: #{5 / $base-font-size}rem;
 	margin-right: #{-6 / $base-font-size}rem;
 }
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index 86efd929..dba607e0 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -25,9 +25,7 @@
 }
 
 .sidebar__add {
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
   .sidebar--contracted & {
     display: none;
   }
@@ -124,8 +122,8 @@
 }
 
 .sidebar__file-item-show-options {
+  @include icon();
   @include themify() {
-    @extend %icon;
     padding: #{4 / $base-font-size}rem 0;
     background-color: map-get($theme-map, 'file-selected-color');
     padding-right: #{6 / $base-font-size}rem;
@@ -183,9 +181,7 @@
 }
 
 .sidebar__expand {
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
   position: absolute;
   top: #{7 / $base-font-size}rem;
   left: #{1 / $base-font-size}rem;
@@ -200,9 +196,7 @@
 }
 
 .sidebar__contract {
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
   position: absolute;
   top: #{7 / $base-font-size}rem;
   left: #{34 / $base-font-size}rem;
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index 5cc15dd8..9775b04c 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -68,9 +68,7 @@
 }
 
 .sketch-list__exit-button {
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
   margin: #{12 / $base-font-size}rem #{16 / $base-font-size}rem;
 }