Icon @astryx-svelte/core v0.5.2 · Icon
Usage
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
Best practices
| Guidance | Practices |
|---|---|
| Do | Use semantic icon names when available; they adapt to theme changes automatically. |
| Do | Override icons through the theme, not globally: defineTheme({icons: {close: <XMarkIcon />}}) scopes the swap to the active <Theme>, and extends shallow-merges it into derived themes. registerIcons() mutates a process-wide registry and warns in dev, so keep it for app bootstrap rather than making it a library's theming seam. |
| Do | Pair icons with text labels for accessibility; icon-only elements need an accessible label. |
| Do | For a meaningful standalone icon (no adjacent text), give it an accessible name via the label prop: it sets role="img" + aria-label and unhides the icon. |
| 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 name prop; Icon uses icon (not name) to specify which icon to render. |
Examples
Common configurations, variations, and states.Icon — Non-Semantic Colors
Non-semantic color palette for icons.
Icon — Semantic Colors
All semantic icon color variants with labels.
Icon — Size Variants
All icon sizes from extra-small to large.
Icon — Status Indicators
Status list using semantic icons for success, warning, error, and info.