Icon
Use s-icon to display visual symbols that communicate meaning and functionality. Icons provide quick recognition and enhance the user interface.
Anchor to propertiesProperties
- Anchor to colorcolorColorKeywordDefault: 'base'
Modify the color to be more or less intense.
- Anchor to sizesizeSizeKeywordDefault: 'base'
Adjusts the size of the icon.
- Anchor to tonetoneToneKeywordDefault: 'auto'
Sets the tone of the icon, based on the intention of the information being conveyed.
- Anchor to typetypeSupportedIconNamesDefault: ''
The type of icon to display. Maps to PDS icon names.
ColorKeyword
'subdued' | 'base' | 'strong'SizeKeyword
'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'ToneKeyword
Tone is a property for defining the color treatment of a component. A tone can apply a grouping of colors to a component. For example, critical may have a specific text color and background color. In some cases, like for Banner, the tone may also affect the semantic and accessibility treatment of the component.
'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical' | 'accent' | 'custom'SupportedIconNames
'external' | 'alert-circle' | 'apps' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'backspace' | 'barcode' | 'battery-low' | 'bolt-filled' | 'bullet' | 'camera-flip' | 'x-circle'Was this section helpful?
Code
<s-icon type="alert-circle"></s-icon>
Examples
Code
Default
<s-icon type="alert-circle"></s-icon>
Preview
