Icons

Lucide, built in

<Icon name="rocket" /> <Icon name="map-pin" size="2em" color="var(--deck-accent)" />

A bare name is a Lucide icon. They ship with the engine, so they work everywhere with nothing to install. Components that take an icon prop (<Chip icon="star">) take the same names.

Any Iconify icon

Iconify collects over 200,000 icons in about 150 sets: Material Design Icons, Carbon, Phosphor, Tabler, brand logos and more. Write the set and the icon with a colon:

<Icon name="mdi:account-circle" color="tomato" />
<Icon name="logos:vue" size="3em" />
<Chip icon="carbon:logo-github">Source</Chip>

The tag form works as well: an empty tag named <set>-<icon> is that icon, drawn at 1.2em.

<mdi-account-circle /> <logos-vue class="text-3xl" /> <carbon-logo-github />

So does the utility-class form, on an empty element:

<div class="i-carbon-logo-github" />

Only an empty tag whose prefix is a real Iconify set becomes an icon, so a custom element that shares a prefix (<ion-button>Go</ion-button>) is left alone.

Prop	Meaning
name	rocket (Lucide) or set:icon (Iconify)
size	the height, as CSS or pixels; the width follows the icon (default 1em; tags 1.2em)
color	a CSS colour, for one-colour icons; multicolour icons such as logos keep theirs
strokeWidth	Lucide icons only (default 1.75)
title	an accessible name; without one the icon is decorative
class	the same as className

Bundled, so a deck works offline

Install the sets you use in the deck:

npmpnpmyarnbun

npm i -D @iconify-json/mdi @iconify-json/logos

pnpm add -D @iconify-json/mdi @iconify-json/logos

yarn add -D @iconify-json/mdi @iconify-json/logos

bun add -D @iconify-json/mdi @iconify-json/logos

kadal-deck dev and kadal-deck build then put the drawings of exactly the icons each slide names into that slide’s module. The built deck makes no request for them and works with no network. @iconify/json (every set at once) works too, if you’d rather install one large package.

A set that isn’t installed still works: its icons are fetched from the Iconify API once, when a slide first shows them, and kept. With no network they show as a dashed box the icon’s size. A name written as an expression (name={icon}) is fetched the same way, because the compiler can’t read it.

On deck.kadal.cc nothing needs installing: hosted decks fetch any icon on first use and keep it.

Checking names

npx kadal-deck checkpnpm exec kadal-deck checkyarn kadal-deck checkbunx kadal-deck check names an icon that doesn’t exist in its set (icon-unknown), a set that isn’t installed so its icons will be fetched at run time (icon-set-missing), and a prefix that is no set at all (icon-set-unknown), with the command that installs the set.