TypeScript icon, indicating that this package has built-in type declarations

3.1.0 • Public • Published


Svelte Heros

PWA Shield npm Created by Shin Okada License npm

New version, Svelte-Heros-v2 is out.

Hero Icons v1 for Svelte. You can select outline and solid icons using the variation props. Svlete-Heros support major CSS framework. You can add additional CSS using the class props.


npm i svelte-heros@latest

Icon names

Icon names

Icon images

Icon images



  import { AcademicCap } from 'svelte-heros';

Faster compiling

For faster compilation, you can import the icon directly.

  import AcademicCap from 'svelte-heros/AcademicCap.svelte';

<AcademicCap />

If you are TypeScript user, this require "typescript": "^5.0.0".

As of March 2023, the typescript@beta version is now available:

pnpm i -D typescript@beta

To avoid any complaints from the editor, add node16 or nodenext to moduleResolution in your tsconfig.json file.

  "compilerOptions": {
    // ...
    "moduleResolution": "nodenext"


Name Default
size 24
ariaLabel file name
variation (solid or outline) outline


The default variation value is outline. Use the variation prop to change it to solid.

<AcademicCap variation="solid" />


Use the size prop to change the size of icons.

<AcademicCap size="30" />
<AcademicCap size="40" />
<AcademicCap size="50" />

CSS HEX Colors

Use the color prop to change colors with HEX color code.

<AcademicCap color="#ff0000" /> <AcademicCap color="#00ffd8" />

CSS framework support

Use the class prop to change colors and add additional css.

For example, Tailwind CSS:

<AcademicCap class="text-pink-700 mr-4" />

If you use the dark mode on your website with Tailwind CSS, add your dark mode class to the class prop.

Let's use dark for the dark mode class as an example.

<AcademicCap class="text-pink-700 dark:text-blue-300" />

Bootstrap example:

<AcademicCap class="position-absolute top-0 px-1" />


All icons have aria-label. For example AcademicCap has aria-label="academic cap". Use ariaLabel prop to modify the aria-label value.

<AcademicCap ariaLabel="red academic cap" class="text-red-500" />

Unfocusable icon

If you want to make an icon unfocusable, add tabindex="-1".

<AcademicCap tabindex="-1" />

Passing down other attributes

You can pass other attibutes as well.

<AcademicCap tabindex="0" />

Using svelte:component

  import { AcademicCap } from 'svelte-heros-v2';

<svelte:component this="{AcademicCap}" />

Import all

Use import * as Icon from 'svelte-heros.

  import * as Icon from 'svelte-heros';

<Icon.ShoppingBag size="30" class="text-red-500" />
<Icon.Sparkles size="40" class="text-blue-700" />
<Icon.Star size="50" class="text-green-700" />
<Icon.VolumeUp size="60" class="text-purple-500" />
<Icon.VolumeUp size="100" class="text-purple-500" tabindex="0" />


Dynamically change the variation

  import { Map } from 'svelte-heros';
  let isSolid = false;

<Map size="50" on:click={() => (isSolid = !isSolid)} variation={isSolid ? 'solid' : 'outline'} />

Original source


Other icons

Experience lightning-fast browsing and offline access with Our PWA

This website can be downloaded and installed on your device for offline access as a Progressive Web App.

To install a PWA, look for the "Add to Home Screen" option in the browser's menu or settings. On most mobile devices, this option can be found by visiting the website, then selecting the "Options" or "Menu" button in the browser, and looking for the "Add to Home Screen" option. On some desktop browsers, right-click on the page and select "Install".


npm i svelte-heros

DownloadsWeekly Downloads






Unpacked Size

938 kB

Total Files


Last publish


  • shinichiokada