Icons

Iconify through @iconify/svelte, with the Lucide collection bundled; register it once, then use <Icon> anywhere.

The library depends on @iconify/svelte and @iconify-json/lucide. Register the collection once in your app entry so icons render on the server and the client:

// src/routes/+layout.c (or any module loaded once)
import { addCollection } from '@iconify/svelte'
import lucide from '@iconify-json/lucide/icons.json'
addCollection lucide

Then:

Icon(name="lucide:check" size="size-5")
Btn(icon="lucide:save") Save
Banner(variant="info" icon="lucide:info") No notes yet

name is Iconify's <set>:<name>; size is any Tailwind size utility (default size-4); flip and rotate are supported.

To use another set, install its JSON package (for example @iconify-json/heroicons) and addCollection it the same way. Components that take an icon prop (Btn, Banner, Chip, Dropdown items, Timeline items, ...) accept any registered icon name.