1 viewer
Component · Content
Icon
Named symbolic glyph that inherits text color and can be decorative or labelled.
- Category
- Content
- Slots
- 1
- States
- 2
- Writer
- Shared
Preview
<Row gap="16px">
<Icon name="home" size={24} />
<Icon name="search" size={24} />
<Icon name="runtime" size={24} />
<Icon name="components" size={24} />
<Icon name="message" size={24} />
<Icon name="clock" size={24} />
<Icon name="folder" size={24} />
<Icon name="check" size={24} />
</Row>Anatomy
The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.
| Slot | DOM class |
|---|---|
| root | .primitive-icon |
States and platforms
The states the contract publishes, the platforms it declares, and the style recipes that dress it.
States
Platforms
Recipes
Renderers
Every tag in the example above renders through a shared writer.
Declared adapters. A status is the manifest's declaration, not a measured parity result.
| Target | Renderer | Status |
|---|---|---|
| web | react | experimental |
| runtime-node | view-node | ready |
| ssr | html-semantic | ready |
| terminal | terminal-text | planned |
| native | native-adapter | experimental |
Accessibility
Decorative icons are hidden from assistive technology; meaningful icons expose an image label.
- Set decorative=false and provide a label when the icon communicates content.
- Use currentColor so icons inherit the surrounding semantic tone.