Icon

kai-icon

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.

• Shadow DOM
• Curated set
• 3 sizes
• Recolor via ::part

Preview

When to use

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); 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:

archive

arrow-left

arrow-up

audio-lines

book-open

bookmark

box

briefcase

chevron-down

chevron-left

circle

clock

code

copy

ellipsis

external-link

file-text

flag

folder

git-branch

git-pull-request

github

globe

home

image

list-filter

lock

message-circle

message-square

mic

monitor

moon

more-horizontal

panel-left

paperclip

pencil

plus

rotate-cw

search

settings

share

sliders-horizontal

smile

sparkles

square-pen

sun

workflow

x

48 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.

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.

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

Examples

Sizing

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

Code

Recolor with ::part(icon)

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

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

Code

Styling

The glyph is a single styleable seam — recolor or resize 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.	kai-icon::part(icon) { color: var(--color-primary) }

Props

Property	Type	Default	Notes
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: `sm` | `md` (default) | `lg`.

Composed from

---

Need a hand? Report a bug Ask for help