diff --git a/docs/dialogs.stories.js b/docs/dialogs.stories.js
index bff7961..fcec4c6 100644
--- a/docs/dialogs.stories.js
+++ b/docs/dialogs.stories.js
@@ -8,8 +8,10 @@ stories.addDecorator(withKnobs);
 
 stories.add('dialog', () => {
   const open = boolean('open', true) ? 'open' : '';
+  const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
+  const selectedClasses = [isRounded];
 
-  return `<dialog ${open}>
+  return `<dialog class="nes-dialog ${selectedClasses.join(' ')}" ${open}>
       <p class="title">Dialog</p>
       <p>Alert: this is a dialog.</p>
   </div>`;
diff --git a/scss/elements/_index.scss b/scss/elements/_index.scss
index d0d5ea0..ea6a17b 100644
--- a/scss/elements/_index.scss
+++ b/scss/elements/_index.scss
@@ -1,12 +1,13 @@
 @charset "utf-8";
 
-@import "buttons.scss";
-@import "containers.scss";
-@import "radios.scss";
-@import "checkboxes.scss";
-@import "lists.scss";
-@import "balloons.scss";
-@import "tables.scss";
-@import "progress.scss";
 @import "avatar.scss";
 @import "badges.scss";
+@import "balloons.scss";
+@import "buttons.scss";
+@import "checkboxes.scss";
+@import "containers.scss";
+@import "dialogs.scss";
+@import "lists.scss";
+@import "progress.scss";
+@import "radios.scss";
+@import "tables.scss";
diff --git a/scss/elements/checkboxes.scss b/scss/elements/checkboxes.scss
index 9445db5..a6f2fd0 100644
--- a/scss/elements/checkboxes.scss
+++ b/scss/elements/checkboxes.scss
@@ -62,22 +62,23 @@
     position: absolute;
     top: -3px;
     left: -28px;
+    font-size: 2px;
     content: "";
   }
 
   // prettier-ignore
   & + span::before { /* stylelint-disable-line no-descending-specificity */
-    @include pixelize($checkbox, $colors, 2px);
+    @include pixelize($checkbox, $colors);
   }
   // prettier-ignore
   &:focus + span::before { /* stylelint-disable-line no-descending-specificity */
-    @include pixelize($checkbox-focus, $colors, 2px);
+    @include pixelize($checkbox-focus, $colors);
   }
 
   &:checked + span::before {
-    @include pixelize($checkbox-checked, $colors, 2px);
+    @include pixelize($checkbox-checked, $colors);
   }
   &:checked:focus + span::before {
-    @include pixelize($checkbox-checked-focus, $colors, 2px);
+    @include pixelize($checkbox-checked-focus, $colors);
   }
 }
diff --git a/scss/elements/dialogs.scss b/scss/elements/dialogs.scss
index e12e544..4e2e8e3 100644
--- a/scss/elements/dialogs.scss
+++ b/scss/elements/dialogs.scss
@@ -1,8 +1,5 @@
 .nes-dialog {
   padding: 1.5rem 2rem;
-  color: $base-color;
-  border: none;
-  box-shadow: 4px 0, -4px 0, 0 4px, 0 -4px;
 
   > .backdrop,
   &::backdrop {
@@ -12,4 +9,9 @@
   > :last-child {
     margin-bottom: 0;
   }
+
+  &.is-rounded {
+    border: none;
+    box-shadow: 4px 0 $base-color, -4px 0 $base-color, 0 4px $base-color, 0 -4px $base-color;
+  }
 }
diff --git a/scss/elements/lists.scss b/scss/elements/lists.scss
index 05e6efc..cd383b5 100644
--- a/scss/elements/lists.scss
+++ b/scss/elements/lists.scss
@@ -28,17 +28,19 @@
     position: absolute;
     top: calc(50% - 8px);
     left: -22px;
+    font-size: 2px;
     content: "";
 
-    @include pixelize($disc, $colors, 2px);
+    @include pixelize($disc, $colors);
   }
 
   &.is-circle li::before {
     position: absolute;
     top: calc(50% - 8px);
     left: -22px;
+    font-size: 2px;
     content: "";
 
-    @include pixelize($circle, $colors, 2px);
+    @include pixelize($circle, $colors);
   }
 }
diff --git a/scss/elements/radios.scss b/scss/elements/radios.scss
index 285e3cd..54b7724 100644
--- a/scss/elements/radios.scss
+++ b/scss/elements/radios.scss
@@ -35,9 +35,10 @@
     position: absolute;
     top: -2px;
     left: -20px;
+    font-size: 2px;
     content: "";
 
-    @include pixelize($radio, $colors, 2px);
+    @include pixelize($radio, $colors);
   }
 
   &:checked:hover,
@@ -48,6 +49,6 @@
   }
 
   &:checked:focus + span::before {
-    @include pixelize($radio-checked-focus, $colors, 2px);
+    @include pixelize($radio-checked-focus, $colors);
   }
 }
diff --git a/scss/icons/icons.scss b/scss/icons/icons.scss
index fa6a371..cb451bf 100644
--- a/scss/icons/icons.scss
+++ b/scss/icons/icons.scss
@@ -23,119 +23,113 @@
 .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;
+    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 6647b29..023dc9c 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 348bf24..22810d0 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 cee3965..ed35b06 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 44232d5..d7e8443 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 39035df..6b69236 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 9ead610..781a78b 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 23971b4..82903fe 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 b98a993..ca5329e 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 6bd903b..c8fdb08 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 151d784..86f0f66 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 fb9f9b9..dedd628 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 ba01cf4..240b241 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 7994e98..143cfcc 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 e2db10d..b91e0e6 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 76e8612..7b968dc 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 741288d..c973afd 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() {