Skip to main content

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 (24)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the icon component.

Anchor to id
id
string

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 size
size
'base' | 'small' | 'small-200' | 'small-100' | 'large' | 'large-100'
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 tone
tone
'info' | 'auto' | 'neutral' | 'success' | 'warning' | 'critical' | 'custom'
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 type
type
'' |

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.

Anchor to ExamplesExamples

Anchor to Display iconsDisplay icons

Add visual cues to help customers understand available actions. This example displays common icons for store, orders, favorites, and settings.

Display icons

A row of icons displaying store, orders, favorites, and settings pictograms from the checkout icon set.

html

<s-stack direction="inline" gap="base">
<s-icon type="store"></s-icon>
<s-icon type="order"></s-icon>
<s-icon type="star"></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

Pair an icon with text to provide contextual information. This example places an info icon next to a delivery estimate label.

html

<s-stack direction="inline" gap="small" alignItems="center">
<s-text>Delivery estimate</s-text>
<s-icon type="info" tone="info"></s-icon>
</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.

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

De-emphasize supporting icons with a neutral tone. This example presents a help icon in a softer visual style.

html

<s-icon type="question-circle" tone="neutral"></s-icon>

Anchor to Use in buttonsUse in buttons

Nest icons inside button components to reinforce actions. This example adds return and contact icons as children of action buttons.

html

<s-stack direction="inline" gap="base">
<s-button>
<s-icon type="return"></s-icon>
Request return
</s-button>
<s-button>
<s-icon type="email"></s-icon>
Contact support
</s-button>
</s-stack>

Anchor to Use in badgesUse in badges

Add icons to badge components for quick status recognition. This example shows neutral and critical badges with matching icons.

html

<s-stack direction="inline" gap="base">
<s-badge tone="neutral" icon="check-circle">Delivered</s-badge>
<s-badge tone="critical" icon="alert-triangle">Action needed</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 info for neutral guidance,success for confirmations, warning for issues that need attention, and critical sparingly 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 customers.
  • Size appropriately: Use base for standard inline icons, small for compact layouts, and large when 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?