# Icon

One of the kit's curated icons rendered as a standalone, themeable inline glyph.

<p class="kai-tag-sub">kai-icon</p>

One of the kit's curated icons as a standalone inline glyph — pick it by `name`, size it with a token, recolor it with `::part(icon)`. It paints in the theme's foreground so it matches the rest of the kit without you reaching for an icon library.

## Preview

> **tip:** 
Reach for `kai-icon` when you need one of the kit's icons in your *own* markup — a glyph next to a heading, in a stat tile, beside a custom button — and want it to match the kit's look without bundling a separate icon library. It's one of three icon tiers: most elements take an `icon` prop that resolves the same curated names (see [Button](/components/button/)); `kai-icon` exposes that resolver as a standalone element; and for anything outside the curated set, drop your own inline `<svg slot="icon">` into an element. Use this tier when the icon stands alone rather than decorating another component.

## All icons

The set is deliberately small — these are the glyphs the kit's own elements use, not a general-purpose icon library. Pick any one by `name`:

## Usage

Set `name` to one of the curated icons above and `size` to one of `sm` / `md` / `lg`. Pass an unknown name and it renders as literal text (with a dev-time warning), so for any glyph outside the set, drop your own inline SVG into another element's `slot="icon"` rather than forcing it through here.

```html
<kai-icon name="globe"></kai-icon>
<kai-icon name="sparkles" size="lg"></kai-icon>
```

## Examples

### Sizing

`size` accepts `sm`, `md` (default), or `lg`.

### Recolor with ::part(icon)

The glyph inherits `currentColor`, so recolor it from the outside via the `icon` part — no shadow-piercing.

```css
kai-icon::part(icon) { color: var(--color-primary); }
```

## Styling

The glyph is a single styleable seam — recolor or resize it from outside with `::part(icon)`:

## Props

## Composed from