kai-icon
Drops into your own markup so a glyph picks up the page’s colour and size.
- Shadow DOM
- Curated set
- 3 sizes
- Recolor via ::part
Preview
Section titled “Preview”All icons
Section titled “All icons”Deliberately small: the glyphs the kit’s own web components use. Pick one by name:
archive arrow-down arrow-left arrow-right arrow-up audio-lines bell book-open bookmark box briefcase check chevron-down chevron-left chevron-right chevron-up circle circle-alert circle-check circle-x clock code copy desktop download ellipsis external-link eye eye-off file-text flag folder git-branch git-pull-request github globe home image info laptop link list-filter lock maximize-2 message-circle message-square mic minimize-2 minus mobile monitor moon more-horizontal panel-left panel-right paperclip pencil play plus rotate-ccw rotate-cw search settings share sliders-horizontal smartphone smile sparkles square square-pen sun tablet trash triangle-alert upload workflow x 77 curated icons. Need another glyph? Pass a URL / data-URI to name, or slot any inline SVG via slot="icon" on the elements that take one.
Set name and a size of sm / md / lg. An unknown name renders as literal text, plus a dev-time warning.
<kai-icon name="globe"></kai-icon><kai-icon name="sparkles" size="lg"></kai-icon>Examples
Section titled “Examples”Sizing
Section titled “Sizing”Recolor with ::part(icon)
Section titled “Recolor with ::part(icon)”The glyph inherits currentColor, so recolor it from outside through the icon part.
kai-icon::part(icon) { color: var(--color-primary); }Styling
Section titled “Styling”Resize or recolor it from outside with ::part(icon):
| Part | Purpose | Example |
|---|---|---|
| icon | The icon wrapper. Inherits `currentColor` and the `size` prop by default; recolor or resize it from outside. | |
| Property | Type | Default | Notes |
|---|---|---|---|
| theme | "light" | "dark" | "auto" | 'auto' | Color mode (`auto` follows prefers-color-scheme). |
| name | string | '' | A curated icon name (e.g. `"mic"`, `"globe"`), an image URL/data-URI, or plain text. |
| size | "sm" | "md" | "lg" | 'md' | Size token. |