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 color
color
"base" | "subdued"
Modify the color to be more or less intense.
Anchor to size
size
"small" | "base"
Adjusts the size of the icon.
Anchor to tone
tone
"info" | "success" | "warning" | "critical" | "auto" | "neutral" | "caution"
Sets the tone of the icon, based on the intention of the information being conveyed.
Anchor to type
type
"" | "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" | "alert-triangle-filled" | "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>