Icon

Renders an SVG icon

Usage

Use the Icon component to render a scalable SVG glyph that aligns with the design system. Under the hood, it uses @iconify/react to resolve and render icons. Icons are vector-based and typically inherit color from the current text color (currentColor) unless overridden with CSS.

Best practices:

• Use icons to support meaning; avoid relying on them as the only indicator.
• Mark purely decorative icons as hidden from assistive technologies (aria-hidden="true").
• Provide an accessible name for meaningful icons (for example, via an adjacent text label or aria-label).
• Keep sizing consistent with surrounding UI; size with CSS (font-size or width/height) for predictable results.
• Prefer standard, predefined icons to ensure visual consistency across the product.

Common placements include inline with text, inside buttons, and within inputs or form controls to clarify actions or statuses.

Custom icon

Provide your own SVG by passing path/shape elements to icon prop.

Add to Storage

Register the icon globally so it can be referenced by its key:

Collections

Group related icons under a shared namespace so you can register and consume many icons at once while avoiding key collisions.

API Reference