Icon
Renders a graphic symbol to visually communicate core parts of the product and available actions. Icons can act as wayfinding tools to help users quickly understand their location within the interface and common interaction patterns.
Anchor to propertiesProperties
- string
A unique identifier for the element.
- Anchor to sizesize'small' | 'large' | 'base' | 'small-200' | 'small-100' | 'large-100'
Adjusts the size of the icon.
- Anchor to tonetone'custom' | 'success' | 'auto' | 'neutral' | 'info' | 'warning' | 'critical'
Sets the tone of the icon, based on the intention of the information being conveyed.
- Anchor to typetype'' | ReducedIconTypes
IconProps
- id
A unique identifier for the element.
string - size
Adjusts the size of the icon.
'small' | 'large' | 'base' | 'small-200' | 'small-100' | 'large-100' - tone
Sets the tone of the icon, based on the intention of the information being conveyed.
'custom' | 'success' | 'auto' | 'neutral' | 'info' | 'warning' | 'critical' - type
'' | ReducedIconTypes
export interface IconProps extends Pick<IconProps$1, 'id' | 'size' | 'tone' | 'type'> {
tone?: Extract<IconProps$1['tone'], 'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'custom'>;
size?: Extract<IconProps$1['size'], 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100'>;
type?: '' | ReducedIconTypes;
}ReducedIconTypes
The list of available icon types.
'cart' | 'note' | 'settings' | 'reset' | 'map' | 'menu' | 'search' | 'circle' | 'filter' | 'image' | 'info' | 'disabled' | 'email' | 'organization' | 'mobile' | 'alert-circle' | 'x'Was this section helpful?
Code
<s-icon type="store" />
<s-icon type="star" />
<s-icon type="settings" />
<s-icon type="image" />
examples
Code
<s-icon type="store" /> <s-icon type="star" /> <s-icon type="settings" /> <s-icon type="image" />
Preview
