Responsive stylized icons

styles/_icons.scss

@@ -1,17 +1,27 @@
 .icon {
   display: inline-block;
   background-color: $jambonz;
-  width: 48px;
-  height: 48px;
+  width: $icon-size-1;
+  height: $icon-size-1;
   border-radius: 24px;
   position: relative;
 
+  @media (max-width: $width-mobile) {
+    width: $icon-size-2;
+    height: $icon-size-2;
+  }
+
   svg {
     stroke: $white;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
+
+    @media (max-width: $width-mobile) {
+      width: 18px;
+      height: 18px;
+    }
   }
 
   &--pill {
@@ -39,9 +49,9 @@
 }
 
 .icons {
-  margin: 0 -16px;
+  margin: 0 -1.1111111111vw;
 
   .icon {
-    margin: 0 16px;
+    margin: 0 1.1111111111vw;
   }
 }

styles/_typography.scss

@@ -37,15 +37,17 @@ a:not(.btn) {
   svg {
     @media (max-width: $width-tablet-1) {
       width: 20px;
-      height: auto;
+      height: 20px;
     }
 
     @media (max-width: $width-tablet-2) {
       width: 18px;
+      height: 18px;
     }
 
     @media (max-width: $width-mobile) {
       width: 16px;
+      height: 16px;
     }
   }
 }

styles/_vars.scss

@@ -25,6 +25,12 @@ $m-size: 16px;
 $ms-size: 14px;
 $mxs-size: 12px;
 
+/******************************************************************************
+ * Icon sizes
+*******************************************************************************/
+$icon-size-1: 48px;
+$icon-size-2: 40px;
+
 /******************************************************************************
  * Sizes
 *******************************************************************************/