sidekickicons-svelte

Svelte package that combines Heroicons and Sidekickicons.

Browse all icons at sidekickicons.com.

This package requires Svelte 5.19.0 or later.

Usage

First, install @sidekickicons/svelte from npm:

pnpm install @sidekickicons/svelte

Now each icon can be imported and used in Svelte components. Since there is no official Svelte package for Heroicons, the @sidekickicons/svelte package includes Heroicons as well.

<script lang="ts">
  import { CrownIcon, BeakerIcon } from '@sidekickicons/svelte/24/solid'
</script>

<div>
  <CrownIcon class="text-blue-500" />
  <BeakerIcon class="text-green-500" />
</div>

Import the icons from their respective directory:

• 24x24 outline: @sidekickicons/svelte/24/outline
• 24x24 solid: @sidekickicons/svelte/24/solid
• 20x20 solid: @sidekickicons/svelte/20/solid
• 16x16 solid: @sidekickicons/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 →

The imported components are simple Svelte components that accept the class prop. The component already includes the size-6, size-5, or size-4 class, so the class adds any additional classes you want to apply.

Building

If you want to build the library yourself, you can do so by running:

pnpm build

This downloads the latest versions of Heroicons and Sidekickicons into optimized/, converts them into Svelte components, and saves them in the src/lib directory.

License

This library is MIT licensed along with both Heroicons and Sidekickicons. You can find license files for all projects in this repository:

• LICENSE
• HEROICONS-LICENSE
• SIDEKICKICONS-LICENSE