Add responsive scaling to Icon component

Shopify · Jan 28, 2024 · 334bd23 · 334bd23
1 parent ba9981c
commit 334bd23
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/.changeset/chilly-dogs-act.md b/.changeset/chilly-dogs-act.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris-icons': minor
+'@shopify/polaris': minor
+---
+
+Added responsive scaling to icons used with the `Icon` component
diff --git a/polaris-react/src/components/Icon/Icon.module.scss b/polaris-react/src/components/Icon/Icon.module.scss
@@ -11,6 +11,14 @@
 
 .Icon svg {
   fill: currentColor;
+  height: 20px;
+  width: 20px;
+
+  @media (--p-breakpoints-md-up) {
+    margin: var(--p-space-050);
+    height: 16px;
+    width: 16px;
+  }
 }
 
 .toneInherit svg {