Options
ds-icon, and have specific classes for applying icons.Basic usage
For a full list of published icon classes, refer to the examples on the Icons page.
Use an empty <i> element for a decorative icon. Add aria-hidden="true" so that assistive technologies ignore it. If the icon conveys information, use role="img" and provide its accessible name with aria-label.
Use a <div> element with text content when you want a readable fallback in the markup. SDS visually hides the text while the icon styles are available, but the text remains available to assistive technologies and is displayed if the icon styles do not load.
Tooltips
Add data-ds-texttip to provide a short tooltip on hover. The attribute does not provide an accessible name, so an empty <i> icon still needs aria-label.
Visual states
Icon adheres to the 4x preset visual states - alert, warning, success and info.
Component colors
All Icon options support component color classes.
Size
When using ds-icon inside ds-text or ds-heading if you don’t specify a specific size, the icon will automatically be scaled to suit the ds-text or ds-heading parent element.
ds-icon, and have specific classes for applying icons.You can specify a specific icon size using the following classes:
Indent
Icon supports a subset to ds-indents
Animation
Animation states for icons should only be used sparingly to indicate temporary states (such as sending/receiving data or waiting for a server side process to complete).
Styles
Round
Square
Rounded
Examples
Inline vs class
This test checks that the icon specified as an inline ds-icon presents the same as an element if an icon class.
Size
The following tests check that a ds-icon without a specific size class inside various html elements/components assume the correct default sizing for that element.
Inline html elements
Inline ds-text
Inline ds-heading
Column alignment
Default
Middle
Legacy
Manifest
The component manifest describes this component's API: its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.
Latest version: https://assets.soracom.io/sds/3.41.0/ds-icon/manifest.json?v=3.41.0
ds-icons.json
SDS icon metadata, including names, aliases, categories, and source URLs.
Source: https://assets.soracom.io/sds/3.41.0/ds-icon/ds-icons.json