Heroicons Svelte

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

Browse at Heroicons.com →

Basic Usage

First, install @fvilers/heroicons-svelte from npm:

npm install @fvilers/heroicons-svelte

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

<script lang="ts">
  import { BeakerIcon } from "@fvilers/heroicons-svelte/24/solid";
</script>

<div>
  <BeakerIcon className="size-6 text-blue-500" />
  <p>...</p>
</div>

The 24x24 outline icons can be imported from @fvilers/heroicons-svelte/24/outline, the 24x24 solid icons can be imported from @fvilers/heroicons-svelte/24/solid, the 20x20 solid icons can be imported from @fvilers/heroicons-svelte/20/solid, and 16x16 solid icons can be imported from @fvilers/heroicons-svelte/16/solid.

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 →

License

This library is MIT licensed.