Shopify · alex-page · Jan 15, 2024 · Jan 15, 2024 · Jan 15, 2024 · Jan 15, 2024
diff --git a/.changeset/angry-lamps-notice.md b/.changeset/angry-lamps-notice.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+[Icons] Fixed references to incorrect icon imports that were causing Storybook to break
diff --git a/polaris-react/src/components/Box/Box.stories.tsx b/polaris-react/src/components/Box/Box.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import {BlockStack, Text, Box, Icon} from '@shopify/polaris';
-import {PaintBrushIcon} from '@shopify/polaris-icons';
+import {PaintBrushFlatIcon} from '@shopify/polaris-icons';
 
 export default {
   component: Box,
@@ -10,7 +10,7 @@ export default {
 export function Default() {
   return (
     <Box>
-      <Icon source={PaintBrushIcon} tone="base" />
+      <Icon source={PaintBrushFlatIcon} tone="base" />
     </Box>
   );
 }
@@ -102,7 +102,7 @@ export function WithOutline() {
         outlineWidth="025"
         outlineColor="border"
       >
-        <Icon source={PaintBrushIcon} tone="base" />
+        <Icon source={PaintBrushFlatIcon} tone="base" />
       </Box>
       <Box
         background="bg-surface"
@@ -111,23 +111,23 @@ export function WithOutline() {
         outlineStyle="dashed"
         outlineColor="border-secondary"
       >
-        <Icon source={PaintBrushIcon} tone="base" />
+        <Icon source={PaintBrushFlatIcon} tone="base" />
       </Box>
       <Box
         background="bg-surface"
         padding="400"
         outlineWidth="050"
         outlineColor="border-info"
       >
-        <Icon source={PaintBrushIcon} tone="base" />
+        <Icon source={PaintBrushFlatIcon} tone="base" />
       </Box>
       <Box
         background="bg-surface"
         padding="400"
         outlineWidth="100"
         outlineColor="border-caution"
       >
-        <Icon source={PaintBrushIcon} tone="base" />
+        <Icon source={PaintBrushFlatIcon} tone="base" />
       </Box>
     </BlockStack>
   );
@@ -136,7 +136,7 @@ export function WithOutline() {
 export function WithBorderRadius() {
   return (
     <Box background="bg-surface" padding="400" borderRadius="200">
-      <Icon source={PaintBrushIcon} tone="info" />
+      <Icon source={PaintBrushFlatIcon} tone="info" />
     </Box>
   );
 }
@@ -150,55 +150,55 @@ export function WithPadding() {
         borderWidth="050"
         borderColor="border-info"
       >
-        <Icon source={PaintBrushMajor} tone="base" />
+        <Icon source={PaintBrushFlatIcon} tone="base" />
       </Box>
       <Box
         background="bg-surface"
         paddingBlock="400"
         borderWidth="050"
         borderColor="border-info"
       >
-        <Icon source={PaintBrushMajor} tone="base" />
+        <Icon source={PaintBrushFlatIcon} tone="base" />
       </Box>
       <Box
         background="bg-surface"
         paddingBlockStart="400"
         borderWidth="050"
         borderColor="border-info"
       >
-        <Icon source={PaintBrushMajor} tone="base" />
+        <Icon source={PaintBrushFlatIcon} tone="base" />
       </Box>
       <Box
         background="bg-surface"
         paddingBlockEnd="400"
         borderWidth="050"
         borderColor="border-info"
       >
-        <Icon source={PaintBrushMajor} tone="base" />
+        <Icon source={PaintBrushFlatIcon} tone="base" />
       </Box>
       <Box
         background="bg-surface"
         paddingInline="400"
         borderWidth="050"
         borderColor="border-info"
       >
-        <Icon source={PaintBrushMajor} tone="base" />
+        <Icon source={PaintBrushFlatIcon} tone="base" />
       </Box>
       <Box
         background="bg-surface"
         paddingInlineStart="400"
         borderWidth="050"
         borderColor="border-info"
       >
-        <Icon source={PaintBrushMajor} tone="base" />
+        <Icon source={PaintBrushFlatIcon} tone="base" />
       </Box>
       <Box
         background="bg-surface"
         paddingInlineEnd="400"
         borderWidth="050"
         borderColor="border-info"
       >
-        <Icon source={PaintBrushMajor} tone="base" />
+        <Icon source={PaintBrushFlatIcon} tone="base" />
       </Box>
     </BlockStack>
   );
@@ -213,7 +213,7 @@ export function WithResponsivePadding() {
         borderWidth="025"
         borderColor="border"
       >
-        <Icon source={PaintBrushIcon} tone="base" />
+        <Icon source={PaintBrushFlatIcon} tone="base" />
       </Box>
       <Box
         background="bg-surface"
@@ -222,7 +222,7 @@ export function WithResponsivePadding() {
         borderWidth="025"
         borderColor="border"
       >
-        <Icon source={PaintBrushIcon} tone="base" />
+        <Icon source={PaintBrushFlatIcon} tone="base" />
       </Box>
       <Box
         background="bg-surface"
@@ -231,7 +231,7 @@ export function WithResponsivePadding() {
         borderWidth="025"
         borderColor="border"
       >
-        <Icon source={PaintBrushIcon} tone="base" />
+        <Icon source={PaintBrushFlatIcon} tone="base" />
       </Box>
       <Box
         background="bg-surface"
@@ -240,15 +240,15 @@ export function WithResponsivePadding() {
         borderWidth="025"
         borderColor="border"
       >
-        <Icon source={PaintBrushIcon} tone="base" />
+        <Icon source={PaintBrushFlatIcon} tone="base" />
       </Box>
       <Box
         background="bg-surface"
         paddingInlineEnd={{xs: '400', sm: '1000'}}
         borderWidth="025"
         borderColor="border"
       >
-        <Icon source={PaintBrushIcon} tone="base" />
+        <Icon source={PaintBrushFlatIcon} tone="base" />
       </Box>
     </BlockStack>
   );

diff --git a/polaris-react/src/components/Card/Card.stories.tsx b/polaris-react/src/components/Card/Card.stories.tsx
@@ -17,7 +17,7 @@ import {
   ResourceList,
   Text,
 } from '@shopify/polaris';
-import {ProductsMinor} from '@shopify/polaris-icons';
+import {ProductIcon} from '@shopify/polaris-icons';
 
 export default {
   component: Card,
@@ -609,7 +609,7 @@ export function WithCustomReactNodeTitle() {
         </Text>
         <BlockStack inlineAlign="start">
           <InlineStack gap="400">
-            <Icon source={ProductsMinor} />
+            <Icon source={ProductIcon} />
             <Text as="h3" variant="headingSm">
               New Products
             </Text>

diff --git a/polaris-react/src/components/Filters/components/SearchField/SearchField.tsx b/polaris-react/src/components/Filters/components/SearchField/SearchField.tsx
@@ -1,5 +1,5 @@
 import React, {useId} from 'react';
-import {XCircleIcon} from '@shopify/polaris-icons';
+import {SearchIcon} from '@shopify/polaris-icons';
 
 import {Spinner} from '../../../Spinner';
 import {Icon} from '../../../Icon';
@@ -62,7 +62,7 @@ export function SearchField({
       disabled={disabled}
       variant={borderlessQueryField ? 'borderless' : 'inherit'}
       size="slim"
-      prefix={mdUp ? <Icon source={XCircleIcon} /> : undefined}
+      prefix={mdUp ? <Icon source={SearchIcon} /> : undefined}
       suffix={
         loading ? (
           <div className={styles.Spinner}>

diff --git a/polaris-react/src/components/Icon/Icon.stories.tsx b/polaris-react/src/components/Icon/Icon.stories.tsx
@@ -97,31 +97,31 @@ export function WithToneInherit() {
     <BlockStack gap="200">
       <Text as="p" tone="caution" variant="bodyMd" alignment="center">
         Caution tone
-        <Icon source={icons.CirclePlusMinor} tone="inherit" />
+        <Icon source={icons.PlusCircleIcon} tone="inherit" />
       </Text>
       <Text as="p" tone="critical" variant="bodyMd" alignment="center">
         Critical tone
-        <Icon source={icons.CirclePlusMinor} tone="inherit" />
+        <Icon source={icons.PlusCircleIcon} tone="inherit" />
       </Text>
       <Text as="p" tone="magic" variant="bodyMd" alignment="center">
         Magic tone
-        <Icon source={icons.CirclePlusMinor} tone="inherit" />
+        <Icon source={icons.PlusCircleIcon} tone="inherit" />
       </Text>
       <Text as="p" tone="magic-subdued" variant="bodyMd" alignment="center">
         Magic subdued tone
-        <Icon source={icons.CirclePlusMinor} tone="inherit" />
+        <Icon source={icons.PlusCircleIcon} tone="inherit" />
       </Text>
       <Text as="p" tone="subdued" variant="bodyMd" alignment="center">
         Subdued tone
-        <Icon source={icons.CirclePlusMinor} tone="inherit" />
+        <Icon source={icons.PlusCircleIcon} tone="inherit" />
       </Text>
       <Text as="p" tone="success" variant="bodyMd" alignment="center">
         Success tone
-        <Icon source={icons.CirclePlusMinor} tone="inherit" />
+        <Icon source={icons.PlusCircleIcon} tone="inherit" />
       </Text>
       <Text as="p" tone="text-inverse" variant="bodyMd" alignment="center">
         Text inverse tone
-        <Icon source={icons.CirclePlusMinor} tone="inherit" />
+        <Icon source={icons.PlusCircleIcon} tone="inherit" />
       </Text>
     </BlockStack>
   );

diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx
@@ -15,11 +15,6 @@ import {
   IndexFiltersMode,
   ButtonGroup,
 } from '@shopify/polaris';
-import {
-  ViewIcon,
-  DeleteIcon,
-  MobileVerticalDotsIcon,
-} from '@shopify/polaris-icons';
 
 import type {IndexFiltersProps} from './IndexFilters';
 

diff --git a/polaris-react/src/components/InlineStack/InlineStack.stories.tsx b/polaris-react/src/components/InlineStack/InlineStack.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import {Box, Badge, Icon, InlineStack, Thumbnail} from '@shopify/polaris';
-import {CapitalIcon, ImageIcon} from '@shopify/polaris-icons';
+import {FlowerIcon, ImageIcon} from '@shopify/polaris-icons';
 
 export default {
   component: InlineStack,
@@ -14,7 +14,7 @@ export function Default() {
       <Badge>Two</Badge>
       <Badge>Three</Badge>
       <Box>
-        <Icon source={CapitalIcon} tone="primary" />
+        <Icon source={FlowerIcon} tone="primary" />
       </Box>
     </InlineStack>
   );

diff --git a/polaris-react/src/components/Navigation/Navigation.stories.tsx b/polaris-react/src/components/Navigation/Navigation.stories.tsx
@@ -6,7 +6,7 @@ import {
   PlusCircleIcon,
   PersonIcon,
   HomeIcon,
-  LogOutIcon,
+  ExitIcon,
   TargetIcon,
   StoreOnlineIcon,
   OrderIcon,
@@ -15,10 +15,10 @@ import {
   ViewIcon,
   StarFilledIcon,
   StarIcon,
-  OrdersFilledIcon,
+  OrderFilledIcon,
   HomeFilledIcon,
-  ProductsFilledIcon,
-  MarketingFilledIcon,
+  ProductFilledIcon,
+  TargetFilledIcon,
 } from '@shopify/polaris-icons';
 
 export default {
@@ -102,7 +102,7 @@ export function WithMultipleSecondaryNavigations() {
             {
               url: '#',
               label: 'Orders',
-              icon: OrdersFilledIcon,
+              icon: OrderFilledIcon,
               matchedItemIcon: OrderIcon,
               badge: '15',
               onClick: () => setSelected('orders'),
@@ -127,7 +127,7 @@ export function WithMultipleSecondaryNavigations() {
             {
               url: '#',
               label: 'Products',
-              icon: ProductsFilledIcon,
+              icon: ProductFilledIcon,
               matchedItemIcon: ProductIcon,
               onClick: () => setSelected('products'),
               matches: selected === 'products',
@@ -177,7 +177,7 @@ export function WithMultipleSecondaryNavigations() {
             {
               url: '#',
               label: 'Marketing',
-              icon: MarketingFilledIcon,
+              icon: TargetFilledIcon,
               matchedItemIcon: TargetIcon,
               onClick: () => setSelected('marketing'),
               matches: selected === 'marketing',
@@ -644,7 +644,7 @@ export function WithMultipleSecondaryActionsForAnItem() {
               url: '#',
               excludePaths: ['#'],
               label: 'Logout',
-              icon: LogOutIcon,
+              icon: ExitIcon,
               onClick: () => setSelected('logout'),
               matches: selected === 'logout',
             },

diff --git a/polaris-react/src/components/Page/Page.stories.tsx b/polaris-react/src/components/Page/Page.stories.tsx
@@ -6,7 +6,7 @@ import {
   ArrowDownIcon,
   ExternalIcon,
   ViewIcon,
-  MobileVerticalDotsIcon,
+  MenuVerticalIcon,
 } from '@shopify/polaris-icons';
 import {
   Badge,
@@ -47,7 +47,7 @@ export function Default() {
       actionGroups={[
         {
           title: 'Promote',
-          icon: MobileVerticalDotsIcon,
+          icon: MenuVerticalIcon,
           actions: [
             {
               content: 'Share on Facebook',

diff --git a/polaris.shopify.com/content/design/colors/using-color.mdx b/polaris.shopify.com/content/design/colors/using-color.mdx
@@ -5,7 +5,7 @@ description: Color highlights important areas, communicates status, urgency, and
 keywords:
   - using color
   - color use
-icon: PaintBrushIcon
+icon: PaintBrushFlatIcon
 ---
 
 # Color &rarr; {frontmatter.title}

diff --git a/polaris.shopify.com/content/design/icons/using-icons.mdx b/polaris.shopify.com/content/design/icons/using-icons.mdx
@@ -1,7 +1,7 @@
 ---
 title: Using icons
 description: Icons enhance an experience by providing intuitive and efficient navigation, conveying information concisely, and making it more visually appealing.
-icon: PaintBrushIcon
+icon: PaintBrushFlatIcon
 keywords:
   - shopify icons
   - icon sets

diff --git a/polaris.shopify.com/content/design/index.mdx b/polaris.shopify.com/content/design/index.mdx
@@ -3,7 +3,7 @@ title: Design
 description: Design principles serve as guiding notions that shape the design of the Shopify admin, with Polaris providing support in implementing these principles effectively.
 order: 3
 status: New
-icon: PaintBrushIcon
+icon: PaintBrushFlatIcon
 ---
 
 # {frontmatter.title}

diff --git a/polaris.shopify.com/content/design/pro-design-language.mdx b/polaris.shopify.com/content/design/pro-design-language.mdx
@@ -2,7 +2,7 @@
 title: Pro design language
 description: Efficiency, intuition, and style combined to empower merchants with data-rich views, action-driven interfaces, and dynamic interactions.
 order: 1
-icon: PaintBrushIcon
+icon: PaintBrushFlatIcon
 status: New
 ---