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.
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.39.12/ds-icon/manifest.json?v=3.39.12
ds-icons.json
SDS icon metadata, including names, aliases, categories, and source URLs.
Source: https://assets.soracom.io/sds/3.39.12/ds-icon/ds-icons.json