@imperatrona/heroicons-svelte

Version:

<p align="center"> <a href="https://heroicons.com" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-dark.svg"> <source media="(pref

66 lines (50 loc) • 2.12 kB

Markdown

View Raw

<p align="center">
  <a href="https://heroicons.com" target="_blank">
    <picture>
      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-dark.svg">
      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-light.svg">
      <img alt="Heroicons" width="315" height="117" style="max-width: 100%" src="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-light.svg">
    </picture>
  </a>
</p>

<p align="center">Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.<p>

<p align="center">
  <a href="https://heroicons.com"><strong>Browse at Heroicons.com &rarr;</strong></a>
</p>

<p align="center">
    <a href="https://github.com/imperatrona/heroicons-svelte/releases"><img src="https://img.shields.io/npm/v/@imperatrona/heroicons-svelte" alt="Latest Release"></a>
    <a href="https://github.com/imperatrona/heroicons-svelte/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@imperatrona/heroicons-svelte.svg" alt="License"></a>
</p>

<p align="center">Using latest version of icons v2.2.0 from Nov 18, 2024 (latest release on Mar 13, 2026)</p>

## Basic Usage

First, install `@imperatrona/heroicons-svelte` from npm:

```sh
npm install @imperatrona/heroicons-svelte
```

```sh
bun install @imperatrona/heroicons-svelte
```

Now each icon can be imported individually as a Svelte component:

```svelte
<script>
  import { BeakerIcon } from '@imperatrona/heroicons-svelte/24/solid'
</script>

<BeakerIcon class="size-6 text-blue-500" />
```

Supported imports
```
@imperatrona/heroicons-svelte/16/solid
```
```
@imperatrona/heroicons-svelte/20/solid
```
```
@imperatrona/heroicons-svelte/24/solid
```
```
@imperatrona/heroicons-svelte/24/outline
```

Icons use an upper camel case naming convention and are always suffixed with the word `Icon`.

[Browse the full list of icon names on UNPKG &rarr;](https://unpkg.com/browse/@imperatrona/heroicons-svelte/icons/24/outline/)

## License

This library is MIT licensed.