diff --git a/src/components/sprite-info/icon--hide.svg b/src/components/sprite-info/icon--hide.svg
index 946353870..9925302db 100644
--- a/src/components/sprite-info/icon--hide.svg
+++ b/src/components/sprite-info/icon--hide.svg
@@ -1 +1,22 @@
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style>.st0{fill:none;stroke:#575e75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}</style><path class="st0" d="M14.5 8s-2.9 4-6.5 4-6.5-4-6.5-4S4.4 4 8 4s6.5 4 6.5 4z"/><circle class="st0" cx="8" cy="8" r="2"/><path class="st0" d="M3 13L13 3"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="13px" viewBox="0 0 16 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>hide-icon-active</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Desktop---1280x720" transform="translate(-876.000000, -522.000000)" fill-rule="nonzero" fill="#4C97FF">
+            <g id="Sprite-Area" transform="translate(792.000000, 460.000000)">
+                <g id="Sprite-Info">
+                    <g id="show-toggle" transform="translate(12.000000, 52.000000)">
+                        <g id="hide-option" transform="translate(63.000000, 0.000000)">
+                            <g id="hide-icon-active" transform="translate(9.000000, 10.000000)">
+                                <path d="M6.59521066,11.546925 L7.81427788,10.3278577 C7.87546831,10.330638 7.93701712,10.3320431 7.99889412,10.3320431 C10.2077277,10.3320431 11.9983412,8.5414297 11.9983412,6.33259608 C11.9983412,6.27071908 11.996936,6.20917027 11.9941558,6.14797984 L14.2033372,3.93879838 C14.5960547,4.41036033 14.7867241,4.74707941 14.7867241,4.74707941 C15.4555764,5.62273609 15.482771,7.06288956 14.7867241,7.91811275 C14.7867241,7.91811275 12.6649157,11.6651922 7.99889412,11.6651922 C7.5023581,11.6651922 7.03463329,11.6227594 6.59521066,11.546925 Z M14.7289607,1.41525222 L14.3137085,1 L3.0000816,12.3136269 L2,11.3137085 L3.22703013,10.0868786 C1.85927754,9.06284716 1.21106414,7.91811275 1.21106414,7.91811275 C0.542211884,7.04245607 0.515017251,5.6023026 1.21106414,4.74707941 C1.21106414,4.74707941 3.33287255,1 7.99889412,1 C9.3931731,1 10.5602777,1.33457907 11.5114783,1.80378248 L13.3155551,0 L14.7299995,1.41421356 L14.7289607,1.41525222 Z M4.70804932,8.60610113 L6.17089206,7.14349711 C6.06103509,6.89584018 6,6.62171451 6,6.33333333 C6,5.22876383 6.8954305,4.33333333 8,4.33333333 C8.288497,4.33333333 8.56272703,4.39441746 8.81046216,4.50435778 L10.2729358,3.04212279 C9.62727902,2.59506525 8.84367348,2.33314902 7.99889412,2.33314902 C5.7900605,2.33314902 3.99944706,4.12376246 3.99944706,6.33259608 C3.99944706,7.1771414 4.26121819,7.96054679 4.70804932,8.60610113 Z" id="Combined-Shape"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/sprite-info/icon--show.svg b/src/components/sprite-info/icon--show.svg
index db06b7048..ddd4f5e0f 100644
--- a/src/components/sprite-info/icon--show.svg
+++ b/src/components/sprite-info/icon--show.svg
@@ -1 +1,23 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;stroke:#575e75;stroke-linecap:round;stroke-linejoin:round}</style></defs><title>show</title><path class="cls-1" d="M14.5 8s-2.91 4-6.5 4-6.5-4-6.5-4S4.41 4 8 4s6.5 4 6.5 4z"/><circle class="cls-1" cx="8" cy="8" r="2"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="11px" viewBox="0 0 16 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>show-icon-active</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Desktop---1280x720" transform="translate(-843.000000, -523.000000)" fill-rule="nonzero" fill="#4C97FF">
+            <g id="Sprite-Area" transform="translate(792.000000, 460.000000)">
+                <g id="Sprite-Info">
+                    <g id="show-toggle" transform="translate(12.000000, 52.000000)">
+                        <g id="show-option" transform="translate(31.000000, 0.000000)">
+                            <g id="show-icon-active" transform="translate(8.000000, 11.000000)">
+                                <path d="M14.7867241,3.74707941 C15.4555764,4.62273609 15.482771,6.06288956 14.7867241,6.91811275 C14.7867241,6.91811275 12.6649157,10.6651922 7.99889412,10.6651922 C3.33287255,10.6651922 1.21106414,6.91811275 1.21106414,6.91811275 C0.542211884,6.04245607 0.515017251,4.6023026 1.21106414,3.74707941 C1.21106414,3.74707941 3.33287255,3.80948559e-16 7.99889412,0 C12.6649157,0 14.7867241,3.74707941 14.7867241,3.74707941 Z M7.99889412,9.33204314 C10.2077277,9.33204314 11.9983412,7.5414297 11.9983412,5.33259608 C11.9983412,3.12376246 10.2077277,1.33314902 7.99889412,1.33314902 C5.7900605,1.33314902 3.99944706,3.12376246 3.99944706,5.33259608 C3.99944706,7.5414297 5.7900605,9.33204314 7.99889412,9.33204314 Z" id="Combined-Shape"></path>
+                                <circle id="Oval" cx="8" cy="5.33333333" r="2"></circle>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/sprite-info/icon--x.svg b/src/components/sprite-info/icon--x.svg
index 4d3cbc3a1..57b1852f5 100644
--- a/src/components/sprite-info/icon--x.svg
+++ b/src/components/sprite-info/icon--x.svg
@@ -1 +1,15 @@
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style>.st0{fill:none;stroke:#575e75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}.st1{fill:#575e75}</style><path class="st0" d="M3 8h10M11.2 6.2L13 8l-1.8 1.8M4.8 9.8L3 8l1.8-1.8"/><path class="st1" d="M7.5 14c0-.3.2-.5.5-.5s.5.2.5.5-.2.5-.5.5-.5-.2-.5-.5zm0-2c0-.3.2-.5.5-.5s.5.2.5.5-.2.5-.5.5-.5-.2-.5-.5zm0-2c0-.3.2-.5.5-.5s.5.2.5.5-.2.5-.5.5-.5-.2-.5-.5zm0-2c0-.3.2-.5.5-.5s.5.2.5.5-.2.5-.5.5-.5-.2-.5-.5zm0-2c0-.3.2-.5.5-.5s.5.2.5.5-.2.5-.5.5-.5-.2-.5-.5zm0-2c0-.3.2-.5.5-.5s.5.2.5.5-.2.5-.5.5-.5-.2-.5-.5zm0-2c0-.3.2-.5.5-.5s.5.2.5.5-.2.5-.5.5-.5-.2-.5-.5z"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>x-icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="x-icon">
+            <path d="M3,8 L12,8" id="Stroke-1" stroke="#575E75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            <rect id="path-1" fill="#575E75" x="7.5" y="2" width="1" height="12" rx="0.5"></rect>
+            <polyline id="Stroke-5" stroke="#575E75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="4 10 2 7.99943423 4 6"></polyline>
+            <polyline id="Stroke-5-Copy" stroke="#575E75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(13.000000, 8.000000) scale(-1, 1) translate(-13.000000, -8.000000) " points="14 10 12 7.99943423 14 6"></polyline>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/sprite-info/icon--y.svg b/src/components/sprite-info/icon--y.svg
index 5fe7df308..f8eab05ef 100644
--- a/src/components/sprite-info/icon--y.svg
+++ b/src/components/sprite-info/icon--y.svg
@@ -1 +1,17 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;stroke:#575e75;stroke-linecap:round;stroke-linejoin:round}.cls-2{fill:#575e75}</style></defs><title>icon--y</title><path class="cls-1" d="M8 13V3M6.23 4.77L8 3l1.77 1.77M9.77 11.23L8 13l-1.77-1.77"/><path class="cls-2" d="M13.5 8a.49.49 0 0 1 .5-.5.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5zm-2 0a.49.49 0 0 1 .5-.5.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5zm-2 0a.49.49 0 0 1 .5-.5.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5zm-2 0a.49.49 0 0 1 .5-.5.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5zm-2 0a.49.49 0 0 1 .5-.5.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5zm-2 0a.49.49 0 0 1 .5-.5.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5zm-2 0a.49.49 0 0 1 .5-.5.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5z"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>y icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="y-icon">
+            <g transform="translate(8.000000, 8.000000) rotate(90.000000) translate(-8.000000, -8.000000) translate(2.000000, 2.000000)">
+                <path d="M1,6 L10,6" id="Stroke-1" stroke="#575E75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <rect id="path-1" fill="#575E75" x="5.5" y="0" width="1" height="12" rx="0.5"></rect>
+                <polyline id="Stroke-5" stroke="#575E75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="2 8 0 5.99943423 2 4"></polyline>
+                <polyline id="Stroke-5-Copy" stroke="#575E75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(11.000000, 6.000000) scale(-1, 1) translate(-11.000000, -6.000000) " points="12 8 10 5.99943423 12 4"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css
index e6a758d1c..16803973b 100644
--- a/src/components/sprite-info/sprite-info.css
+++ b/src/components/sprite-info/sprite-info.css
@@ -35,9 +35,9 @@
         We're overriding the global, which we set to border-box
     */
     box-sizing: content-box;
-    width: 1.25rem;
-    height: 1.25rem;
-    padding: calc($space / 2);
+    width: 1.0rem;
+    height: 1.0rem;
+    padding: 0.25rem;
     outline: none;
     user-select: none;
 }
@@ -48,9 +48,16 @@
 }
 
 /* @todo: refactor radio divs to input */
-.radio { opacity: 0.4; cursor: pointer; }
-.radio.is-active   { opacity: 1; }
-.radio.is-disabled { cursor: default; }
+.radio {
+    filter: saturate(0);
+    cursor: pointer;
+}
+.radio.is-active {
+    filter: none;
+}
+.radio.is-disabled {
+    cursor: default;
+}
 
 .radio-left {
     border: 1px solid $form-border;