# @krowten/svelte-heroicons

> All 324 Heroicons v2 icons for Svelte 5 in the 24px outline and solid styles, through one typed <Icon name> component or a tree-shakeable component per icon.

- Install `@krowten/svelte-heroicons`. The main API is one component that takes the heroicons name: `import { Icon } from '@krowten/svelte-heroicons'`, then `<Icon name="beaker" />`. There is no `@heroicons/svelte` package.
- `name` is typed as `IconName`, the union of all heroicons v2 names (`arrow-up-tray`, `magnifying-glass`). Heroicons v1 names such as `logout` or `search` do not exist; the full list is below.
- `Icon` includes every icon, about 65 KB gzipped. When bundle size matters, import single icons as components instead: `import { BeakerIcon } from '@krowten/svelte-heroicons'`, then `<BeakerIcon />`. The component name is the heroicons name in PascalCase plus `Icon`: `arrow-up-tray` is `ArrowUpTrayIcon`.
- Add the `solid` prop for the filled style: `<Icon name="beaker" solid />`. Only the 24px outline and solid styles are included, not the 20px mini or 16px micro ones.
- Icons are 24×24 by default. Size them with CSS (`class="size-5"`) and color them with the text color; they use `currentColor`.
- Icons are `aria-hidden` by default. An icon with an `aria-label` gets `role="img"`.
- Requires Svelte 5.

## Docs

- [README](https://github.com/krowten/svelte-heroicons/blob/main/README.md): installation, usage, props, styling and accessibility
- [Icon browser](https://krowten.github.io/svelte-heroicons/): search the icons and copy their imports; every icon has a page at https://krowten.github.io/svelte-heroicons/icons/<name>
- [Full reference](https://krowten.github.io/svelte-heroicons/llms-full.txt): the README and every icon name with its component, in one file

## Optional

- [npm package](https://www.npmjs.com/package/@krowten/svelte-heroicons)
- [Source code](https://github.com/krowten/svelte-heroicons)
- [Changelog](https://github.com/krowten/svelte-heroicons/blob/main/CHANGELOG.md)