Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Icon

The Icon component renders a Polaris icon from a predefined set of names. Icons are useful for reinforcing meaning alongside text, indicating actions in buttons, or providing visual cues in status indicators.

For displaying images from URLs, use Image.

Support
Targets (46)

Supported targets

Anchor to PropertiesProperties

Props for the Icon component, which renders a Polaris icon by name. Inherits accessibility label support from AccessibilityLabelProps.

Anchor to name
name
required

The name of the icon to display.

Anchor to accessibilityLabel
accessibilityLabel
string

A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. When set, any children or label supplied won't be announced to screen readers.

Anchor to id
id
string

A unique identifier for the icon.

Anchor to size
size
'base' | 'fill'
Default: 'base'

The size of the icon.

  • base: Renders the icon at its standard size.
  • fill: Stretches the icon to fill the available space in its container while preserving its aspect ratio.
Anchor to tone
tone
'inherit' | 'critical'
Default: 'inherit'

The color of the icon.

  • inherit: Uses the color from the icon's parent, giving it a monochrome appearance that matches surrounding text.
  • critical: Applies a red, attention-grabbing color for error or destructive contexts.

Anchor to IconNameIconName

The name of a Polaris icon. Each value corresponds to a specific icon from the Polaris icon set. Names follow the pattern {IconName}{Major|Minor}, where Major icons are intended for primary use and Minor icons are smaller variants for inline or secondary use.

'AbandonedCartFilledMajor' | 'AbandonedCartMajor' | 'AccessibilityMajor' | 'ActivitiesMajor' | 'AddCodeMajor' | 'AddImageMajor' | 'AddMajor' | 'AddNoteMajor' | 'AddProductMajor' | 'AdjustMinor' | 'AffiliateMajor' | 'AlertMinor' | 'AnalyticsBarHorizontalMinor' | 'AnalyticsBarStackedMinor' | 'AnalyticsCohortMinor' | 'AnalyticsDonutMinor' | 'AnalyticsFilledMinor' | 'AnalyticsFunnelMinor' | 'AnalyticsLineMinor' | 'AnalyticsMajor' | 'AnalyticsMinor' | 'AnalyticsTableMinor' | 'AnyClickModelMinor' | 'AppExtensionMinor' | 'AppsFilledMajor' | 'AppsMajor' | 'AppsMinor' | 'ArchiveMajor' | 'ArchiveMinor' | 'ArrowDownMinor' | 'ArrowLeftMinor' | 'ArrowRightMinor' | 'ArrowUpMinor' | 'AttachmentFilledMajor' | 'AttachmentMajor' | 'AutomationFilledMajor' | 'AutomationMajor' | 'BackspaceMajor' | 'BalanceFilledMajor' | 'BalanceMajor' | 'BankFilledMajor' | 'BankMajor' | 'BarcodeMajor' | 'BehaviorFilledMajor' | 'BehaviorMajor' | 'BehaviorMinor' | 'BillingStatementDollarFilledMajor' | 'BillingStatementDollarMajor' | 'BillingStatementEuroFilledMajor' | 'BillingStatementEuroMajor' | 'BillingStatementPoundFilledMajor' | 'BillingStatementPoundMajor' | 'BillingStatementRupeeFilledMajor' | 'BillingStatementRupeeMajor' | 'BillingStatementYenFilledMajor' | 'BillingStatementYenMajor' | 'BlockMinor' | 'BlockquoteMajor' | 'BlogMajor' | 'BoldMajor' | 'BoldMinor' | 'BugMajor' | 'ButtonCornerPillMajor' | 'ButtonCornerRoundedMajor' | 'ButtonCornerSquareMajor' | 'ButtonMinor' | 'BuyButtonButtonLayoutMajor' | 'BuyButtonHorizontalLayoutMajor' | 'BuyButtonMajor' | 'BuyButtonVerticalLayoutMajor' | 'CalendarMajor' | 'CalendarMinor' | 'CalendarTickMajor' | 'CalendarTimeMinor' | 'CameraMajor' | 'CancelMajor' | 'CancelMinor' | 'CancelSmallMinor' | 'CapitalFilledMajor' | 'CapitalMajor' | 'CapturePaymentMinor' | 'CardReaderChipMajor' | 'CardReaderMajor' | 'CardReaderTapMajor' | 'CaretDownMinor' | 'CaretUpMinor' | 'CartDownFilledMajor' | 'CartDownMajor' | 'CartFilledMajor' | 'CartMajor' | 'CartUpMajor' | 'CashDollarFilledMajor' | 'CashDollarMajor' | 'CashDollarMinor' | 'CashEuroMajor' | 'CashPoundMajor' | 'CashRupeeMajor' | 'CashYenMajor' | 'CategoriesMajor' | 'ChannelsMajor' | 'ChatMajor' | 'ChecklistAlternateMajor' | 'ChecklistMajor' | 'CheckoutMajor' | 'ChevronDownMinor' | 'ChevronLeftMinor' | 'ChevronRightMinor' | 'ChevronUpMinor' | 'CircleAlertMajor' | 'CircleCancelMajor' | 'CircleCancelMinor' | 'CircleChevronDownMinor' | 'CircleChevronLeftMinor' | 'CircleChevronRightMinor' | 'CircleChevronUpMinor' | 'CircleDisableMinor' | 'CircleDisabledMajor' | 'CircleDotsMajor' | 'CircleDownMajor' | 'CircleInformationMajor' | 'CircleLeftMajor' | 'CircleMinusMajor' | 'CircleMinusMinor' | 'CircleMinusOutlineMinor' | 'CirclePlusMajor' | 'CirclePlusMinor' | 'CirclePlusOutlineMinor' | 'CircleRightMajor' | 'CircleTickMajor' | 'CircleTickMinor' | 'CircleTickOutlineMinor' | 'CircleUpMajor' | 'ClipboardMinor' | 'ClockMajor' | 'ClockMinor' | 'CodeMajor' | 'CodeMinor' | 'CollectionReferenceMinor' | 'CollectionsFilledMajor' | 'CollectionsMajor' | 'ColorNoneMinor' | 'ColorsMajor' | 'Column1Major' | 'ColumnWithTextMajor' | 'Columns2Major' | 'Columns3Major' | 'Columns3Minor' | 'ComposeMajor' | 'ConfettiMajor' | 'ConnectMinor' | 'ContentFilledMinor' | 'ContentMinor' | 'ConversationMinor' | 'CreditCardCancelMajor' | 'CreditCardMajor' | 'CreditCardPercentMajor' | 'CreditCardSecureMajor' | 'CurrencyConvertMinor' | 'CustomerMinusMajor' | 'CustomerPlusMajor' | 'CustomersFilledMinor' | 'CustomersMajor' | 'CustomersMinor' | 'DataDrivenModelMinor' | 'DataVisualizationMajor' | 'DecimalMinor' | 'DeleteMajor' | 'DeleteMinor' | 'DesktopMajor' | 'DetailedPopUpMajor' | 'DiamondAlertMajor' | 'DiamondAlertMinor' | 'DigitalMediaReceiverMajor' | 'DiscountAutomaticMajor' | 'DiscountCodeMajor' | 'DiscountsFilledMinor' | 'DiscountsMajor' | 'DiscountsMinor' | 'DisputeMinor' | 'DnsSettingsMajor' | 'DockFloatingMajor' | 'DockSideMajor' | 'DomainNewMajor' | 'DomainRedirectMinor' | 'DomainsFilledMajor' | 'DomainsMajor' | 'DraftOrdersFilledMajor' | 'DraftOrdersMajor' | 'DragDropMajor' | 'DragHandleMinor' | 'DropdownMinor' | 'DuplicateMinor' | 'DynamicSourceMajor' | 'DynamicSourceMinor' | 'EditMajor' | 'EditMinor' | 'EmailMajor' | 'EmailNewsletterMajor' | 'EmbedMinor' | 'EnableSelectionMinor' | 'EnterMajor' | 'EnvelopeMajor' | 'ExchangeMajor' | 'ExistingInventoryMajor' | 'ExitMajor' | 'ExploreImagesMajor' | 'ExportMinor' | 'ExtendMajor' | 'ExtendMinor' | 'ExternalMinor' | 'ExternalSmallMinor' | 'EyeDropperMinor' | 'FaviconMajor' | 'FavoriteMajor' | 'FeaturedCollectionMajor' | 'FeaturedContentMajor' | 'FileFilledMinor' | 'FileMinor' | 'FilterMajor' | 'FilterMinor' | 'FinancesMajor' | 'FinancesMinor' | 'FirstClickModelMinor' | 'FirstOrderMajor' | 'FirstVisitMajor' | 'FlagMajor' | 'FlipCameraMajor' | 'FolderDownMajor' | 'FolderMajor' | 'FolderMinusMajor' | 'FolderPlusMajor' | 'FolderUpMajor' | 'FollowUpEmailMajor' | 'FoodMajor' | 'FooterMajor' | 'FormsMajor' | 'FraudProtectMajor' | 'FraudProtectMinor' | 'FraudProtectPendingMajor' | 'FraudProtectPendingMinor' | 'FraudProtectUnprotectedMajor' | 'FraudProtectUnprotectedMinor' | 'FulfillmentFulfilledMajor' | 'FulfillmentOnHoldMajor' | 'GamesConsoleMajor' | 'GaugeMajor' | 'GaugeMinor' | 'GiftCardFilledMinor' | 'GiftCardMajor' | 'GiftCardMinor' | 'GlobeMajor' | 'GlobeMinor' | 'GrammarMajor' | 'HashtagMajor' | 'HashtagMinor' | 'HeaderMajor' | 'HeartMajor' | 'HideKeyboardMajor' | 'HideMinor' | 'HintMajor' | 'HomeFilledMinor' | 'HomeMajor' | 'HomeMinor' | 'HorizontalDotsMinor' | 'IconNameSet' | 'IconsFilledMajor' | 'IconsMajor' | 'IdentityCardFilledMajor' | 'IdentityCardMajor' | 'IllustrationMajor' | 'ImageAltMajor' | 'ImageAltMinor' | 'ImageMajor' | 'ImageWithTextMajor' | 'ImageWithTextOverlayMajor' | 'ImagesMajor' | 'ImportMinor' | 'ImportStoreMajor' | 'InactiveLocationMajor' | 'InactiveLocationMinor' | 'IncomingMajor' | 'IndentMajor' | 'IndentMinor' | 'InfoMinor' | 'InsertDynamicSourceMajor' | 'InsertDynamicSourceMinor' | 'InstallMinor' | 'InventoryFilledMajor' | 'InventoryMajor' | 'InviteMinor' | 'IqMajor' | 'ItalicMajor' | 'ItalicMinor' | 'JobsFilledMajor' | 'JobsMajor' | 'KeyMajor' | 'KeyboardMajor' | 'KeyboardMinor' | 'LabelPrinterMajor' | 'LandingPageMajor' | 'LanguageFilledMinor' | 'LanguageMinor' | 'LastClickModelMinor' | 'LastNonDirectClickModelMinor' | 'LegalFilledMajor' | 'LegalMajor' | 'LinearModelMinor' | 'LinkMinor' | 'ListFilledMajor' | 'ListMajor' | 'ListMinor' | 'LiveViewFilledMajor' | 'LiveViewMajor' | 'LocationFilledMajor' | 'LocationMajor' | 'LocationsMinor' | 'LockFilledMajor' | 'LockMajor' | 'LockMinor' | 'LogOutMinor' | 'LogoBlockMajor' | 'MagicMajor' | 'MagicMinor' | 'ManagedStoreMajor' | 'MarkFulfilledMinor' | 'MarkPaidMinor' | 'MarketingFilledMinor' | 'MarketingMajor' | 'MarketingMinor' | 'MarketsFilledMajor' | 'MarketsMajor' | 'MaximizeMajor' | 'MaximizeMinor' | 'MeasurementMinor' | 'MentionMajor' | 'MergeMinor' | 'MetafieldsFilledMinor' | 'MetafieldsMajor' | 'MetafieldsMinor' | 'MetaobjectMinor' | 'MetaobjectReferenceMinor' | 'MicrophoneMajor' | 'MinimizeMajor' | 'MinimizeMinor' | 'MinusMajor' | 'MinusMinor' | 'MobileAcceptMajor' | 'MobileBackArrowMajor' | 'MobileCancelMajor' | 'MobileChevronMajor' | 'MobileHamburgerMajor' | 'MobileHorizontalDotsMajor' | 'MobileMajor' | 'MobilePlusMajor' | 'MobileVerticalDotsMajor' | 'MonerisMajor' | 'MoneyFilledMinor' | 'MoneyMinor' | 'NatureMajor' | 'NavigationMajor' | 'NoteMajor' | 'NoteMinor' | 'NotificationFilledMajor' | 'NotificationMajor' | 'OnlineStoreMajor' | 'OnlineStoreMinor' | 'OrderStatusMinor' | 'OrderedListMajor' | 'OrderedListMinor' | 'OrdersFilledMinor' | 'OrdersMajor' | 'OrdersMinor' | 'OrganizationMajor' | 'OutdentMajor' | 'OutdentMinor' | 'OutgoingMajor' | 'PackageFilledMajor' | 'PackageMajor' | 'PageDownMajor' | 'PageMajor' | 'PageMinusMajor' | 'PagePlusMajor' | 'PageReferenceMinor' | 'PageUpMajor' | 'PaginationEndMinor' | 'PaginationStartMinor' | 'PaintBrushMajor' | 'PaperCheckMajor' | 'PaperCheckMinor' | 'PasskeyFilledMinor' | 'PasskeyMajor' | 'PasskeyMinor' | 'PauseCircleMajor' | 'PauseMajor' | 'PauseMinor' | 'PaymentsFilledMajor' | 'PaymentsMajor' | 'PersonalizedTextMajor' | 'PhoneInMajor' | 'PhoneMajor' | 'PhoneOutMajor' | 'PinMajor' | 'PinMinor' | 'PinUnfilledMajor' | 'PinUnfilledMinor' | 'PlanFilledMinor' | 'PlanMajor' | 'PlanMinor' | 'PlayCircleMajor' | 'PlayMajor' | 'PlayMinor' | 'PlusMinor' | 'PointOfSaleMajor' | 'PopularMajor' | 'PositionBasedModelMinor' | 'PriceLookupMinor' | 'PrintMajor' | 'PrintMinor' | 'ProductCostMajor' | 'ProductReferenceMinor' | 'ProductReturnsMinor' | 'ProductsFilledMinor' | 'ProductsMajor' | 'ProductsMinor' | 'ProfileMajor' | 'ProfileMinor' | 'PromoteFilledMinor' | 'PromoteMinor' | 'QuestionMarkInverseMajor' | 'QuestionMarkInverseMinor' | 'QuestionMarkMajor' | 'QuestionMarkMinor' | 'QuickSaleMajor' | 'ReadTimeMinor' | 'ReceiptMajor' | 'RecentSearchesMajor' | 'RedoMajor' | 'ReferralCodeMajor' | 'ReferralMajor' | 'RefreshMajor' | 'RefreshMinor' | 'RefundMajor' | 'RefundMinor' | 'RemoveProductMajor' | 'RepeatOrderMajor' | 'ReplaceMajor' | 'ReplayMinor' | 'ReportFilledMinor' | 'ReportMinor' | 'ReportsMajor' | 'ResetMinor' | 'ResourcesMajor' | 'ReturnMinor' | 'ReturnsMajor' | 'RichTextMinor' | 'RiskMajor' | 'RiskMinor' | 'Rows2Major' | 'SandboxMajor' | 'SaveMinor' | 'SearchMajor' | 'SearchMinor' | 'SectionMajor' | 'SecureMajor' | 'SelectMinor' | 'SendMajor' | 'SettingsFilledMinor' | 'SettingsMajor' | 'SettingsMinor' | 'ShareIosMinor' | 'ShareMinor' | 'ShipmentFilledMajor' | 'ShipmentMajor' | 'ShopcodesMajor' | 'SidebarLeftMajor' | 'SidebarRightMajor' | 'SimplifyMajor' | 'SimplifyMinor' | 'SlideshowMajor' | 'SmileyHappyMajor' | 'SmileyJoyMajor' | 'SmileyNeutralMajor' | 'SmileySadMajor' | 'SocialAdMajor' | 'SocialPostMajor' | 'SoftPackMajor' | 'SortAscendingMajor' | 'SortDescendingMajor' | 'SortMinor' | 'SoundMajor' | 'StarFilledMinor' | 'StarOutlineMinor' | 'StatusActiveMajor' | 'StopMajor' | 'StoreDetailsFilledMinor' | 'StoreDetailsMinor' | 'StoreFilledMinor' | 'StoreMajor' | 'StoreMinor' | 'StoreStatusMajor' | 'TabletMajor' | 'TapChipMajor' | 'TaxFilledMajor' | 'TaxMajor' | 'TeamMajor' | 'TemplateMajor' | 'TemplateMinor' | 'TextAlignmentCenterMajor' | 'TextAlignmentLeftMajor' | 'TextAlignmentRightMajor' | 'TextBlockMajor' | 'TextColorMajor' | 'TextColorMinor' | 'TextMajor' | 'ThemeEditMajor' | 'ThemeStoreMajor' | 'ThemesMajor' | 'ThumbsDownMajor' | 'ThumbsDownMinor' | 'ThumbsUpMajor' | 'ThumbsUpMinor' | 'TickMinor' | 'TickSmallMinor' | 'TimeDecayModelMinor' | 'TimelineAttachmentMajor' | 'TipsMajor' | 'TitleMinor' | 'ToggleMinor' | 'ToolsMajor' | 'TransactionFeeDollarMajor' | 'TransactionFeeEuroMajor' | 'TransactionFeePoundMajor' | 'TransactionFeeRupeeMajor' | 'TransactionFeeYenMajor' | 'TransactionMajor' | 'TransferFilledMajor' | 'TransferInMajor' | 'TransferMajor' | 'TransferOutMajor' | 'TransferWithinShopifyMajor' | 'TransportMajor' | 'TroubleshootMajor' | 'TypeMajor' | 'TypeMinor' | 'UnderlineMajor' | 'UnderlineMinor' | 'UndoMajor' | 'UnfulfilledMajor' | 'UnknownDeviceMajor' | 'UpdateInventoryMajor' | 'UploadMajor' | 'VariantMajor' | 'ViewMajor' | 'ViewMinor' | 'ViewportNarrowMajor' | 'ViewportShortMajor' | 'ViewportTallMajor' | 'ViewportWideMajor' | 'VocabularyMajor' | 'VolumeMinor' | 'WandMajor' | 'WandMinor' | 'WearableMajor' | 'WeightMinor' | 'WholesaleMajor' | 'WifiMajor'

Anchor to ExamplesExamples

Anchor to Show action status indicatorsShow action status indicators

Pair status icons with text labels to indicate sync success and pricing errors. This example uses Icon with CircleTickMajor and CircleAlertMajor names inside an InlineStack, with accessibilityLabel props for screen readers.

Show action status indicators

Pair status icons with text labels to indicate sync success and pricing errors. This example uses `Icon` with `CircleTickMajor` and `CircleAlertMajor` names inside an [InlineStack](/docs/api/admin-extensions/2025-07/ui-components/layout-and-structure/inlinestack), with `accessibilityLabel` props for screen readers.

Show action status indicators

import {reactExtension, Icon, Text, InlineStack, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

return (
<BlockStack>
<InlineStack>
<Icon name="CircleTickMajor" accessibilityLabel="Synced" />
<Text>Inventory synced</Text>
</InlineStack>
<InlineStack>
<Icon name="CircleAlertMajor" accessibilityLabel="Error" />
<Text>Pricing error detected</Text>
</InlineStack>
</BlockStack>
);
}

export default reactExtension(
'admin.product-details.block.render',
() => <App />,
);
import {extension, Icon, Text, InlineStack, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
'admin.product-details.block.render',
(root) => {

const stack = root.createComponent(BlockStack);

const syncRow = root.createComponent(InlineStack);
const syncIcon = root.createComponent(Icon, {
name: 'CircleTickMajor',
accessibilityLabel: 'Synced',
});
const syncText = root.createComponent(Text, {}, 'Inventory synced');
syncRow.appendChild(syncIcon);
syncRow.appendChild(syncText);

const alertRow = root.createComponent(InlineStack);
const alertIcon = root.createComponent(Icon, {
name: 'CircleAlertMajor',
accessibilityLabel: 'Error',
});
const alertText = root.createComponent(Text, {}, 'Pricing error detected');
alertRow.appendChild(alertIcon);
alertRow.appendChild(alertText);

stack.appendChild(syncRow);
stack.appendChild(alertRow);
root.appendChild(stack);
},
);

Anchor to Apply critical tone to warning iconsApply critical tone to warning icons

Apply the critical tone to icons that represent failures or items requiring attention. This example shows passing and failing compliance checks, using the default tone for passes and tone="critical" for failures so merchants can spot problems at a glance.

Apply critical tone to warning icons

import {reactExtension, Icon, Text, InlineStack, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

return (
<BlockStack>
<Text fontWeight="bold">Compliance checks</Text>
<InlineStack>
<Icon name="CircleTickMajor" accessibilityLabel="Passed" />
<Text>Safety standards — passed</Text>
</InlineStack>
<InlineStack>
<Icon
name="CircleAlertMajor"
tone="critical"
accessibilityLabel="Failed"
/>
<Text>Label requirements — action needed</Text>
</InlineStack>
</BlockStack>
);
}

export default reactExtension(
'admin.product-details.block.render',
() => <App />,
);
import {extension, Icon, Text, InlineStack, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
'admin.product-details.block.render',
(root) => {

const stack = root.createComponent(BlockStack);

const heading = root.createComponent(
Text,
{fontWeight: 'bold'},
'Compliance checks',
);

const passRow = root.createComponent(InlineStack);
const passIcon = root.createComponent(Icon, {
name: 'CircleTickMajor',
accessibilityLabel: 'Passed',
});
const passText = root.createComponent(Text, {}, 'Safety standards — passed');
passRow.appendChild(passIcon);
passRow.appendChild(passText);

const failRow = root.createComponent(InlineStack);
const failIcon = root.createComponent(Icon, {
name: 'CircleAlertMajor',
tone: 'critical',
accessibilityLabel: 'Failed',
});
const failText = root.createComponent(Text, {}, 'Label requirements — action needed');
failRow.appendChild(failIcon);
failRow.appendChild(failText);

stack.appendChild(heading);
stack.appendChild(passRow);
stack.appendChild(failRow);
root.appendChild(stack);
},
);

Anchor to Fill a container with an iconFill a container with an icon

Scale an icon to match its parent container for larger displays like status badges or app logos. This example places an icon with size="fill" inside a fixed-size Box, allowing it to scale proportionally.

Fill a container with an icon

import {reactExtension, Icon, Text, BlockStack, Box} from '@shopify/ui-extensions-react/admin';

function App() {

return (
<BlockStack>
<Text fontWeight="bold">App status</Text>
<Box inlineSize={48} blockSize={48}>
<Icon name="AppsMajor" size="fill" accessibilityLabel="App connected" />
</Box>
<Text>Connected to warehouse system</Text>
</BlockStack>
);
}

export default reactExtension(
'admin.product-details.block.render',
() => <App />,
);
import {extension, Icon, Text, BlockStack, Box} from '@shopify/ui-extensions/admin';

export default extension(
'admin.product-details.block.render',
(root) => {

const stack = root.createComponent(BlockStack);

const label = root.createComponent(
Text,
{fontWeight: 'bold'},
'App status',
);

const iconContainer = root.createComponent(Box, {
inlineSize: 48,
blockSize: 48,
});

const appIcon = root.createComponent(Icon, {
name: 'AppsMajor',
size: 'fill',
accessibilityLabel: 'App connected',
});

iconContainer.appendChild(appIcon);

const status = root.createComponent(
Text,
{},
'Connected to warehouse system',
);

stack.appendChild(label);
stack.appendChild(iconContainer);
stack.appendChild(status);
root.appendChild(stack);
},
);

Anchor to Best practicesBest practices

  • Pair icons with text labels: Icons work best when accompanied by a text label. Avoid using icons alone unless their meaning is universally understood (like a trash icon for delete).
  • Choose meaningful icons: Select icons that clearly communicate the intended concept. Browse the Polaris Icons documentation to find the best match.
  • Don't use icons for decoration: Every icon should serve a functional purpose. Decorative icons add visual noise and can confuse merchants who rely on assistive technologies.

Anchor to LimitationsLimitations

  • Only icons from the Polaris icon set are available. Custom SVGs or external icon libraries can't be used.
  • Icon supports limited tone options (inherit and critical) and size options (base and fill). Arbitrary pixel sizes and custom colors aren't supported.
  • Icons are rendered as visual elements only. They don't support click handlers or interactive behavior. To make an icon clickable, wrap it in a Button or Pressable component.
Was this page helpful?