diff --git a/scss/icons/icons.scss b/scss/icons/icons.scss
index fa6a3717..817d1970 100644
--- a/scss/icons/icons.scss
+++ b/scss/icons/icons.scss
@@ -23,119 +23,115 @@
 .nes-icon {
   position: relative;
   display: inline-block;
+  width: calc(1em * 16);
+  height: calc(1em * 16);
 
-  @mixin setup($px) {
-    $size: $px * 16;
-
-    width: $size;
-    height: $size;
-
-    &::before {
-      position: absolute;
-      top: $px * -1;
-      left: $px * -1;
-      display: block;
-      width: $size;
-      height: $size;
-      content: "";
-      background: transparent;
-    }
-
-    &.heart::before {
-      @include pixelize($icon-heart, $icon-heart-colors, $px);
-    }
-    &.heart.is-empty::before {
-      @include pixelize($icon-heart-empty, $icon-heart-empty-colors, $px);
-    }
-
-    &.star::before {
-      @include pixelize($icon-star, $icon-star-colors, $px);
-    }
-    &.star.is-empty::before {
-      @include pixelize($icon-star-empty, $icon-star-empty-colors, $px);
-    }
-    &.star.is-half::before {
-      @include pixelize($icon-star-half, $icon-star-colors, $px);
-    }
-    &.star.is-transparent::before {
-      @include pixelize($icon-star-transparent, $icon-star-colors, $px);
-    }
-
-    &.trophy::before {
-      @include pixelize($icon-trophy, $icon-trophy-colors, $px);
-    }
-    &.trophy.is-empty::before {
-      @include pixelize($icon-trophy-empty, $icon-trophy-empty-colors, $px);
-    }
-
-    &.like::before {
-      @include pixelize($icon-like, $icon-like-colors, $px);
-    }
-    &.like.is-empty::before {
-      @include pixelize($icon-like-empty, $icon-like-empty-colors, $px);
-    }
-
-    &.twitter::before {
-      @include pixelize($icon-twitter, $icon-twitter-colors, $px);
-    }
-
-    &.facebook::before {
-      @include pixelize($icon-facebook, $icon-facebook-colors, $px);
-    }
-
-    &.github::before {
-      @include pixelize($icon-github, $icon-github-colors, $px);
-    }
-
-    &.youtube::before {
-      @include pixelize($icon-youtube, $icon-youtube-colors, $px);
-    }
-
-    &.close::before {
-      @include pixelize($icon-close, $icon-close-colors, $px);
-    }
-
-    &.google::before {
-      @include pixelize($icon-google, $icon-google-colors, $px);
-    }
-
-    &.medium::before {
-      @include pixelize($icon-medium, $icon-medium-colors, $px);
-    }
-
-    &.twitch::before {
-      @include pixelize($icon-twitch, $icon-twitch-colors, $px);
-    }
-
-    &.reddit::before {
-      @include pixelize($icon-reddit, $icon-reddit-colors, $px);
-    }
-
-    &.whatsapp::before {
-      @include pixelize($icon-whatsapp, $icon-whatsapp-colors, $px);
-    }
-
-    &.gmail::before {
-      @include pixelize($icon-gmail, $icon-gmail-colors, $px);
-    }
-
-    &.linkedin::before {
-      @include pixelize($icon-linkedin, $icon-linkedin-colors, $px);
-    }
-  }
-
+  // font size dictates pixel size, everything will adjust
   // default
-  @include setup(2px);
+  font-size: 2px;
 
   &.is-small {
-    @include setup(1px);
+    font-size: 1px;
   }
 
   &.is-medium {
-    @include setup(3px);
+    font-size: 3px;
   }
 
   &.is-large {
-    @include setup(4px);
+    font-size: 4px;
+  }
+
+  &::before {
+    position: absolute;
+    top: -1em;
+    left: -1em;
+    display: block;
+    width: 1em;
+    height: 1em;
+    content: "";
+    background: transparent;
+  }
+
+  &.heart::before {
+    @include pixelize($icon-heart, $icon-heart-colors);
+  }
+  &.heart.is-empty::before {
+    @include pixelize($icon-heart-empty, $icon-heart-empty-colors);
+  }
+
+  &.star::before {
+    @include pixelize($icon-star, $icon-star-colors);
+  }
+  &.star.is-empty::before {
+    @include pixelize($icon-star-empty, $icon-star-empty-colors);
+  }
+  &.star.is-half::before {
+    @include pixelize($icon-star-half, $icon-star-colors);
+  }
+  &.star.is-transparent::before {
+    @include pixelize($icon-star-transparent, $icon-star-colors);
+  }
+
+  &.trophy::before {
+    @include pixelize($icon-trophy, $icon-trophy-colors);
+  }
+  &.trophy.is-empty::before {
+    @include pixelize($icon-trophy-empty, $icon-trophy-empty-colors);
+  }
+
+  &.like::before {
+    @include pixelize($icon-like, $icon-like-colors);
+  }
+  &.like.is-empty::before {
+    @include pixelize($icon-like-empty, $icon-like-empty-colors);
+  }
+
+  &.twitter::before {
+    @include pixelize($icon-twitter, $icon-twitter-colors);
+  }
+
+  &.facebook::before {
+    @include pixelize($icon-facebook, $icon-facebook-colors);
+  }
+
+  &.github::before {
+    @include pixelize($icon-github, $icon-github-colors);
+  }
+
+  &.youtube::before {
+    @include pixelize($icon-youtube, $icon-youtube-colors);
+  }
+
+  &.close::before {
+    @include pixelize($icon-close, $icon-close-colors);
+  }
+
+  &.google::before {
+    @include pixelize($icon-google, $icon-google-colors);
+  }
+
+  &.medium::before {
+    @include pixelize($icon-medium, $icon-medium-colors);
+  }
+
+  &.twitch::before {
+    @include pixelize($icon-twitch, $icon-twitch-colors);
+  }
+
+  &.reddit::before {
+    @include pixelize($icon-reddit, $icon-reddit-colors);
+  }
+
+  &.whatsapp::before {
+    @include pixelize($icon-whatsapp, $icon-whatsapp-colors);
+  }
+
+  &.gmail::before {
+    @include pixelize($icon-gmail, $icon-gmail-colors);
+  }
+
+  &.linkedin::before {
+    @include pixelize($icon-linkedin, $icon-linkedin-colors);
   }
 }
diff --git a/scss/pixel-arts/ash.scss b/scss/pixel-arts/ash.scss
index 6647b29c..023dc9ce 100644
--- a/scss/pixel-arts/ash.scss
+++ b/scss/pixel-arts/ash.scss
@@ -1,5 +1,4 @@
 .nes-ash {
-  $px: 6px;
   // prettier-ignore
   $ash-colors: (#f8f8ff, #ff614e, #007f7f,
   #181818, #ffe3c5, #426adb, #4169e1);
@@ -24,16 +23,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 14;
-  height: $px * 15;
+  width: calc(1em * 14);
+  height: calc(1em * 15);
+  font-size: 6px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($ash, $ash-colors, $px);
+    @include pixelize($ash, $ash-colors);
   }
 }
diff --git a/scss/pixel-arts/bcrikko.scss b/scss/pixel-arts/bcrikko.scss
index 348bf242..22810d01 100644
--- a/scss/pixel-arts/bcrikko.scss
+++ b/scss/pixel-arts/bcrikko.scss
@@ -1,5 +1,4 @@
 .nes-bcrikko {
-  $px: 4px;
   $bcrikko-colors: (#333, #f9f2d7, #c5090c, #fff);
 
   // prettier-ignore
@@ -24,16 +23,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 16;
-  height: $px * 16;
+  width: calc(1em * 16);
+  height: calc(1em * 16);
+  font-size: 4px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($bcrikko, $bcrikko-colors, $px);
+    @include pixelize($bcrikko, $bcrikko-colors);
   }
 }
diff --git a/scss/pixel-arts/bulbasaur.scss b/scss/pixel-arts/bulbasaur.scss
index cee3965a..ed35b069 100644
--- a/scss/pixel-arts/bulbasaur.scss
+++ b/scss/pixel-arts/bulbasaur.scss
@@ -1,5 +1,4 @@
 .nes-bulbasaur {
-  $px: 6px;
   // prettier-ignore
   $bulbasaur-colors: (#000, #8beb46, #2d8d22, #5ceee1,
    #3fc3b5, #fdfdf5, #ca242a);
@@ -26,16 +25,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 20;
-  height: $px * 17;
+  width: calc(1em * 20);
+  height: calc(1em * 17);
+  font-size: 6px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($bulbasaur, $bulbasaur-colors, $px);
+    @include pixelize($bulbasaur, $bulbasaur-colors);
   }
 }
diff --git a/scss/pixel-arts/charmander.scss b/scss/pixel-arts/charmander.scss
index 44232d5a..d7e84431 100644
--- a/scss/pixel-arts/charmander.scss
+++ b/scss/pixel-arts/charmander.scss
@@ -1,5 +1,4 @@
 .nes-charmander {
-  $px: 6px;
   // prettier-ignore
   $charmander-colors: (#000202, #f77702, #eb2010,
     #fdfcff, #e5d70a, #e7d70e);
@@ -27,16 +26,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 21;
-  height: $px * 18;
+  width: calc(1em * 21);
+  height: calc(1em * 18);
+  font-size: 6px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($charmander, $charmander-colors, $px);
+    @include pixelize($charmander, $charmander-colors);
   }
 }
diff --git a/scss/pixel-arts/kirby.scss b/scss/pixel-arts/kirby.scss
index 39035dfb..6b692362 100644
--- a/scss/pixel-arts/kirby.scss
+++ b/scss/pixel-arts/kirby.scss
@@ -1,5 +1,4 @@
 .nes-kirby {
-  $px: 6px;
   $kirby-colors: (#000, #ffaccc, #ff5478);
   // prettier-ignore
   $kirby: (
@@ -23,16 +22,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 16;
-  height: $px * 16;
+  width: calc(1em * 16);
+  height: calc(1em * 16);
+  font-size: 6px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($kirby, $kirby-colors, $px);
+    @include pixelize($kirby, $kirby-colors);
   }
 }
diff --git a/scss/pixel-arts/mario.scss b/scss/pixel-arts/mario.scss
index 9ead610a..781a78b3 100644
--- a/scss/pixel-arts/mario.scss
+++ b/scss/pixel-arts/mario.scss
@@ -1,5 +1,4 @@
 .nes-mario {
-  $px: 6px;
   // prettier-ignore
   $mario-colors: (#f81c2f, #65352b, #ffbb8e, #000,
     #1560ad, #aeaeac, #fef102);
@@ -25,16 +24,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 14;
-  height: $px * 16;
+  width: calc(1em * 14);
+  height: calc(1em * 16);
+  font-size: 6px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($mario, $mario-colors, $px);
+    @include pixelize($mario, $mario-colors);
   }
 }
diff --git a/scss/pixel-arts/nes-icon.scss b/scss/pixel-arts/nes-icon.scss
index 23971b45..82903fe1 100644
--- a/scss/pixel-arts/nes-icon.scss
+++ b/scss/pixel-arts/nes-icon.scss
@@ -1,5 +1,4 @@
 .nes-logo {
-  $px: 3px;
   $logo-colors: (#3e3634, #c3c3c3, #787973, #bf1710);
 
   // prettier-ignore
@@ -18,16 +17,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 16;
-  height: $px * 11;
+  width: calc(1em * 16);
+  height: calc(1em * 11);
+  font-size: 3px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($logo, $logo-colors, $px);
+    @include pixelize($logo, $logo-colors);
   }
 }
diff --git a/scss/pixel-arts/nes-jp-icon.scss b/scss/pixel-arts/nes-jp-icon.scss
index b98a993d..ca5329e6 100644
--- a/scss/pixel-arts/nes-jp-icon.scss
+++ b/scss/pixel-arts/nes-jp-icon.scss
@@ -1,5 +1,4 @@
 .nes-jp-logo {
-  $px: 3px;
   $logo-colors: (#333, #871f37, #dfd3b9);
 
   // prettier-ignore
@@ -18,16 +17,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 16;
-  height: $px * 11;
+  width: calc(1em * 16);
+  height: calc(1em * 11);
+  font-size: 3px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($logo, $logo-colors, $px);
+    @include pixelize($logo, $logo-colors);
   }
 }
diff --git a/scss/pixel-arts/octocat.scss b/scss/pixel-arts/octocat.scss
index 6bd903be..c8fdb08a 100644
--- a/scss/pixel-arts/octocat.scss
+++ b/scss/pixel-arts/octocat.scss
@@ -1,5 +1,4 @@
 .nes-octocat {
-  $px: 6px;
   $octocat-colors: (#333, #ffdec4, #cb7066);
   // prettier-ignore
   $octocat-1: (
@@ -40,17 +39,18 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 14;
-  height: $px * 15;
+  width: calc(1em * 14);
+  height: calc(1em * 15);
+  font-size: 6px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($octocat-1, $octocat-colors, $px);
+    @include pixelize($octocat-1, $octocat-colors);
   }
 
   &.animate::before {
@@ -59,10 +59,10 @@
 
   @keyframes wave {
     0% {
-      @include pixelize($octocat-1, $octocat-colors, $px);
+      @include pixelize($octocat-1, $octocat-colors);
     }
     50% {
-      @include pixelize($octocat-2, $octocat-colors, $px);
+      @include pixelize($octocat-2, $octocat-colors);
     }
   }
 }
diff --git a/scss/pixel-arts/phone.scss b/scss/pixel-arts/phone.scss
index 151d7841..86f0f663 100644
--- a/scss/pixel-arts/phone.scss
+++ b/scss/pixel-arts/phone.scss
@@ -1,5 +1,4 @@
 .nes-phone {
-  $px: 6px;
   $phone-colors: (#596985, #3c4665, #000);
   // prettier-ignore
   $phone: (
@@ -28,16 +27,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 8;
-  height: $px * 21;
+  width: calc(1em * 8);
+  height: calc(1em * 21);
+  font-size: 6px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($phone, $phone-colors, $px);
+    @include pixelize($phone, $phone-colors);
   }
 }
diff --git a/scss/pixel-arts/pokeball.scss b/scss/pixel-arts/pokeball.scss
index fb9f9b9f..dedd6283 100644
--- a/scss/pixel-arts/pokeball.scss
+++ b/scss/pixel-arts/pokeball.scss
@@ -1,5 +1,4 @@
 .nes-pokeball {
-  $px: 6px;
   $pokeball-colors: (#060606, #ff001d, #fff, #9fa1a1);
   // prettier-ignore
   $pokeball: (
@@ -23,16 +22,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 14;
-  height: $px * 14;
+  width: calc(1em * 14);
+  height: calc(1em * 14);
+  font-size: 6px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($pokeball, $pokeball-colors, $px);
+    @include pixelize($pokeball, $pokeball-colors);
   }
 }
diff --git a/scss/pixel-arts/smartphone.scss b/scss/pixel-arts/smartphone.scss
index ba01cf46..240b2417 100644
--- a/scss/pixel-arts/smartphone.scss
+++ b/scss/pixel-arts/smartphone.scss
@@ -1,5 +1,4 @@
 .nes-smartphone {
-  $px: 6px;
   $smartphone-colors: (#fff, #060606);
   // prettier-ignore
   $smartphone: (
@@ -34,16 +33,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 16;
-  height: $px * 27;
+  width: calc(1em * 16);
+  height: calc(1em * 27);
+  font-size: 6px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($smartphone, $smartphone-colors, $px);
+    @include pixelize($smartphone, $smartphone-colors);
   }
 }
diff --git a/scss/pixel-arts/snes-icon.scss b/scss/pixel-arts/snes-icon.scss
index 7994e98f..143cfcce 100644
--- a/scss/pixel-arts/snes-icon.scss
+++ b/scss/pixel-arts/snes-icon.scss
@@ -1,5 +1,4 @@
 .snes-logo {
-  $px: 3px;
   $logo-colors: (#333, #d7d7d7, #8932e5, #ad6df0);
 
   // prettier-ignore
@@ -18,16 +17,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 16;
-  height: $px * 11;
+  width: calc(1em * 16);
+  height: calc(1em * 11);
+  font-size: 3px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($logo, $logo-colors, $px);
+    @include pixelize($logo, $logo-colors);
   }
 }
diff --git a/scss/pixel-arts/snes-jp-icon.scss b/scss/pixel-arts/snes-jp-icon.scss
index e2db10dc..b91e0e62 100644
--- a/scss/pixel-arts/snes-jp-icon.scss
+++ b/scss/pixel-arts/snes-jp-icon.scss
@@ -18,16 +18,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 16;
-  height: $px * 11;
+  width: calc(1em * 16);
+  height: calc(1em * 11);
+  font-size: 3px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($logo, $logo-colors, $px);
+    @include pixelize($logo, $logo-colors);
   }
 }
diff --git a/scss/pixel-arts/squirtle.scss b/scss/pixel-arts/squirtle.scss
index 76e8612c..7b968dc7 100644
--- a/scss/pixel-arts/squirtle.scss
+++ b/scss/pixel-arts/squirtle.scss
@@ -1,5 +1,4 @@
 .nes-squirtle {
-  $px: 6px;
   // prettier-ignore
   $squirtle-colors: (#000, #9cf, #cb6633,
     #9fa1a1, #fff, #f89934, #ff3);
@@ -26,16 +25,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 21;
-  height: $px * 17;
+  width: calc(1em * 21);
+  height: calc(1em * 17);
+  font-size: 6px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($squirtle, $squirtle-colors, $px);
+    @include pixelize($squirtle, $squirtle-colors);
   }
 }
diff --git a/scss/utilities/icon-mixin.scss b/scss/utilities/icon-mixin.scss
index 741288df..c973afd1 100644
--- a/scss/utilities/icon-mixin.scss
+++ b/scss/utilities/icon-mixin.scss
@@ -1,4 +1,4 @@
-@mixin pixelize($matrix, $colors, $size, $default-color: null) {
+@mixin pixelize($matrix, $colors, $default-color: null) {
   $ret: "";
   $moz: "";
   @if ($default-color == null) {
@@ -37,18 +37,18 @@
 
         $color: nth($colors, $dot);
         @if $color == $default-color {
-          $ret: $ret + ($j * $size) + " " + ($i * $size);
-          $moz: $moz + ($j * $size) + " " + ($i * $size) + " 0 0.020em";
+          $ret: $ret + $j + "em " + $i + "em";
+          $moz: $moz + $j + "em " + $i + "em 0 0.020em";
         } @else {
-          $ret: $ret + ($j * $size) + " " + ($i * $size) + " " + $color;
-          $moz: $moz + ($j * $size) + " " + ($i * $size) + " 0 0.020em " + $color;
+          $ret: $ret + $j + "em " + $i + "em " + $color;
+          $moz: $moz + $j + "em " + $i + "em 0 0.020em " + $color;
         }
       }
     }
   }
 
-  width: $size;
-  height: $size;
+  width: 1em;
+  height: 1em;
   color: $default-color;
   box-shadow: unquote($ret);
   @-moz-document url-prefix() {