Icon
The icon component renders graphic symbols to visually communicate actions, status, and navigation throughout the interface. Use icon to reinforce button actions, indicate status states, or provide wayfinding cues that help users understand available functionality.
Icon components support multiple sizes, semantic tones, and integration with components like button, badge, and chip. For recognized payment brand marks, use payment icon instead.
Support
Targets (29)
Supported targets
- purchase.
checkout. actions. render-before - purchase.
checkout. block. render - purchase.
checkout. cart-line-item. render-after - purchase.
checkout. cart-line-list. render-after - purchase.
checkout. contact. render-after - purchase.
checkout. delivery-address. render-after - purchase.
checkout. delivery-address. render-before - purchase.
checkout. footer. render-after - purchase.
checkout. header. render-after - purchase.
checkout. payment-method-list. render-after - purchase.
checkout. payment-method-list. render-before - purchase.
checkout. pickup-location-list. render-after - purchase.
checkout. pickup-location-list. render-before - purchase.
checkout. pickup-location-option-item. render-after - purchase.
checkout. pickup-point-list. render-after - purchase.
checkout. pickup-point-list. render-before - purchase.
checkout. reductions. render-after - purchase.
checkout. reductions. render-before - purchase.
checkout. shipping-option-item. details. render - purchase.
checkout. shipping-option-item. render-after - purchase.
checkout. shipping-option-list. render-after - purchase.
checkout. shipping-option-list. render-before - purchase.
thank-you. announcement. render - purchase.
thank-you. block. render - purchase.
thank-you. cart-line-item. render-after - purchase.
thank-you. cart-line-list. render-after - purchase.
thank-you. customer-information. render-after - purchase.
thank-you. footer. render-after - purchase.
thank-you. header. render-after
Supported targets
- purchase.
checkout. actions. render-before - purchase.
checkout. block. render - purchase.
checkout. cart-line-item. render-after - purchase.
checkout. cart-line-list. render-after - purchase.
checkout. contact. render-after - purchase.
checkout. delivery-address. render-after - purchase.
checkout. delivery-address. render-before - purchase.
checkout. footer. render-after - purchase.
checkout. header. render-after - purchase.
checkout. payment-method-list. render-after - purchase.
checkout. payment-method-list. render-before - purchase.
checkout. pickup-location-list. render-after - purchase.
checkout. pickup-location-list. render-before - purchase.
checkout. pickup-location-option-item. render-after - purchase.
checkout. pickup-point-list. render-after - purchase.
checkout. pickup-point-list. render-before - purchase.
checkout. reductions. render-after - purchase.
checkout. reductions. render-before - purchase.
checkout. shipping-option-item. details. render - purchase.
checkout. shipping-option-item. render-after - purchase.
checkout. shipping-option-list. render-after - purchase.
checkout. shipping-option-list. render-before - purchase.
thank-you. announcement. render - purchase.
thank-you. block. render - purchase.
thank-you. cart-line-item. render-after - purchase.
thank-you. cart-line-list. render-after - purchase.
thank-you. customer-information. render-after - purchase.
thank-you. footer. render-after - purchase.
thank-you. header. render-after
Anchor to PropertiesProperties
Configure the following properties on the icon component.
Configure the following properties on the icon component.
- Anchor to idididstringstring
A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.
- Anchor to sizesizesize'small' | 'large' | 'base' | 'small-200' | 'small-100' | 'large-100''small' | 'large' | 'base' | 'small-200' | 'small-100' | 'large-100'Default: 'base'Default: 'base'
The size of the icon.
'base': Default size that works well for most use cases.'small': Small icon for inline use within text or compact UI elements.'small-200': Extra small icon for the most compact contexts.'small-100': Small icon suitable for tight or dense layouts.'large': Large icon for emphasis or prominent display.'large-100': Extra large icon for maximum visual impact.
- Anchor to tonetonetone'custom' | 'success' | 'info' | 'auto' | 'neutral' | 'warning' | 'critical''custom' | 'success' | 'info' | 'auto' | 'neutral' | 'warning' | 'critical'Default: 'auto'Default: 'auto'
The semantic meaning and color treatment of the icon.
'info': Informational content or helpful tips.'auto': Automatically determined based on context.'neutral': General information without specific intent.'success': Positive outcomes or successful states.'warning': Important warnings about potential issues.'critical': Urgent problems or destructive actions.'custom': Inherits a custom color from its parent element's CSS.
- Anchor to typetypetype'' | ReducedIconTypes'' | ReducedIconTypes
The type of icon that will be displayed. You can specify an icon name from the available icon set, or use an empty string to show no icon.
ReducedIconTypes
The subset of icon types available in checkout and customer account surfaces. This is a narrowed set from the full Shopify icon library, containing only the icons supported in these contexts.
'cart' | 'note' | 'settings' | 'reset' | 'map' | 'menu' | 'search' | 'circle' | 'filter' | 'image' | 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cash-dollar' | 'categories' | 'check-circle' | 'check-circle-filled' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'menu-horizontal' | 'menu-vertical' | 'minus' | 'mobile' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'return' | 'savings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'Anchor to ExamplesExamples
Anchor to Display iconsDisplay icons
Add visual cues to help buyers identify checkout actions. This example displays common icons for cart, delivery, store, and settings using the type property.Display icons
html
<s-stack direction="inline" gap="base">
<s-icon type="cart"></s-icon>
<s-icon type="delivery"></s-icon>
<s-icon type="store"></s-icon>
<s-icon type="settings"></s-icon>
</s-stack>
Anchor to Pair an icon with a text labelPair an icon with a text label
Add an icon beside text to reinforce a message visually. This example renders a store icon inline with a pickup availability label using an s-stack with direction="inline".html
<s-stack direction="inline" gap="base" alignItems="center">
<s-icon type="store" size="base"></s-icon>
<s-text>Available for in-store pickup</s-text>
</s-stack>
Anchor to Apply semantic tonesApply semantic tones
Communicate status through color-coded icons. This example displays icons with warning, success, info, and critical tones to convey different states at a glance.html
<s-stack direction="inline" gap="base">
<s-icon type="alert-circle" tone="warning"></s-icon>
<s-icon type="check-circle" tone="success"></s-icon>
<s-icon type="info" tone="info"></s-icon>
<s-icon type="alert-triangle" tone="critical"></s-icon>
</s-stack>
Anchor to De-emphasize an iconDe-emphasize an icon
Lower the visual prominence of an icon for secondary content. This example displays a help icon with tone="neutral" so it doesn't compete with primary actions.html
<s-icon type="question-circle" tone="neutral"></s-icon>
Reinforce button actions with visual cues. This example places icons inside buttons for add-to-cart and remove actions with appropriate tones.
html
<s-stack direction="inline" gap="base">
<s-button><s-icon type="cart"></s-icon> Add to cart</s-button>
<s-button tone="critical"><s-icon type="delete"></s-icon> Remove</s-button>
</s-stack>
Anchor to Use in badgesUse in badges
Enhance status badges with visual indicators. This example pairs badges with icons to show fulfilled and action-required order states.html
<s-stack direction="inline" gap="base">
<s-badge tone="neutral" icon="check-circle">Fulfilled</s-badge>
<s-badge tone="critical" icon="alert-triangle">Action required</s-badge>
</s-stack>
Anchor to Best practicesBest practices
- Use meaningful icons to support actions and status, not decorate: Icons should clarify what an action does or indicate state. Use icons with well-established meanings such as a trash icon for delete actions, a checkmark for completed status, or a warning icon for errors. Avoid adding icons purely for visual interest.
- Use tones consistently to communicate semantic meaning: Apply
infofor neutral guidance,successfor confirmations,warningfor issues that need attention, andcriticalsparingly for problems that must be resolved immediately. - Pair with text labels: Don't rely on icons alone to communicate meaning. Always pair icons with visible text for clarity and accessibility.
- Maintain consistency across your interface: Always use the same icon for the same action or concept throughout your extension. If you use a pencil for edit in one place, use it everywhere. Inconsistent icon usage confuses buyers.
- Size appropriately: Use
basefor standard inline icons,smallfor compact layouts, andlargewhen extra emphasis is needed. Avoid mixing sizes in the same row. Inconsistent sizing creates uneven vertical alignment and makes the UI feel unpolished.
Was this page helpful?