Heroicons for Svelte

Heroicons has no official Svelte package. @sidekickicons/svelte has all 316 Heroicons plus 78 Sidekickicons as Svelte 5 components. It needs Svelte 5.19 or later.

Browse icons with Svelte code

Install

npm install @sidekickicons/svelte

Usage

Import icons from the directory of the style you want. Heroicons and Sidekickicons come from the same package, so you can mix them freely. Only the icons you import end up in your bundle.

<script>
  import { ChartBarIcon, CrownIcon } from "@sidekickicons/svelte/24/outline";
</script>

<ChartBarIcon class="text-slate-500" />
<CrownIcon class="size-8 text-indigo-600" />

Style	Import from	Design	Default size
Outline	24/outline	24×24, 1.5 px stroke	24 px
Solid	24/solid	24×24, solid fill	24 px
Mini	20/solid	20×20, solid fill	20 px
Micro	16/solid	16×16, solid fill	16 px

Component names are the icon name in PascalCase followed by Icon: crown is CrownIcon.

Size and color

Icons have a default size of 24, 20 or 16 px, depending on the style. Any size class you pass, like size-8 in Tailwind, overrides it.
Icons use currentColor, so they take the text color around them, or a color class like text-indigo-600.
The class prop works like any Svelte class attribute, so it also takes arrays and objects.

Importing a single icon

You can also import a single icon file directly, with full types:

import CrownIcon from "@sidekickicons/svelte/24/outline/CrownIcon.svelte";

Accessibility

Icons are hidden from screen readers, so give the button or link around an icon a label:

<button aria-label="Upgrade">
  <CrownIcon class="text-indigo-600" />
</button>

Icons Heroicons doesn't have

The package also has 78 Sidekickicons in the same style, like these. See them all on Icons missing from Heroicons .

keyboard h4 italic-slash eraser check-square star-half target percent infinity arc-third sidebar-left cookie