Icons are small visual symbols that represent actions, objects, or concepts. They improve scannability and reinforce meaning alongside text. Supports both direct SVG components and semantic icon names that adapt to the active theme.
ts
| Guidance | Practices |
|---|---|
| Do | Use semantic icon names when available; they adapt to theme changes automatically. |
| Do | Pair icons with text labels for accessibility; icon-only elements need an accessible label. |
| Do | Use color tokens for icon colors, not hardcoded hex values. |
| Do | Be mindful of context; decorative icons in compact components can distract rather than help. |
| Don't | Use icons as the sole means of conveying meaning; always provide a text alternative. |
| Don't | Resize icons with arbitrary pixel values; use the provided size props. |
| Don't | Mix icon styles (e.g. outline and filled) within the same context. |
| Don't | Render raw SVG elements; always wrap in Icon for consistent sizing and color. |
| Don't | Pass a |
Status list using semantic icons for success, warning, error, and info.