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
- Anchor to colorcolor"base" | "subdued"
Modify the color to be more or less intense.
- Anchor to interestForinterestForstring
ID of a component that should respond to interest (e.g. hover and focus) on this component.
- Anchor to sizesize"small" | "base"
Adjusts the size of the icon.
- Anchor to tonetone"info" | "success" | "warning" | "critical" | "auto" | "neutral" | "caution"
Sets the tone of the icon, based on the intention of the information being conveyed.
- Anchor to typetype"" | "replace" | "search" | "link" | "product" | "variant" | "collection" | "select" | "info" | "incomplete" | "complete" | "color" | "money" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" | "alert-location" | "alert-octagon-filled" | "alert-octagon" | "alert-triangle-filled" | "alert-triangle" | "app-extension"
Specifies the type of icon that will be displayed.
Was this section helpful?
Code
<s-icon type="home"></s-icon>
<s-icon type="order"></s-icon>
<s-icon type="product"></s-icon>
<s-icon type="settings"></s-icon>
Examples
Code
Default
<s-icon type="home"></s-icon> <s-icon type="order"></s-icon> <s-icon type="product"></s-icon> <s-icon type="settings"></s-icon>