Heroicons-svelte NPM

Heroicons for Svelte

Basic Usage

First, install heroicons-svelte from npm:

npm install heroicons-svelte

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

<script>
	import { BeakerIcon } from 'heroicons-svelte/24/solid';
</script>

<BeakerIcon class="h-6 w-6 text-blue-500" />

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

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

Both icon styles are preconfigured to be stylable by setting the color CSS property, either manually or using utility classes like text-gray-500 in a framework like Tailwind CSS.

Browse the full list of icon names on UNPKG →