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

4.6.0 • Public • Published

Svelte Iconoir

CI   license   NPM Package

Svelte Iconoir

The entire iconoir set (1300+ SVG icons) as Svelte components.

See all available icons on the iconoir homepage

svelte-iconoi@4.6.0 matches iconoir@6.11.0


# npm
npm install @indaco/svelte-iconoir

# pnpm
pnpm add @indaco/svelte-iconoir

# yarn
yarn add @indaco/svelte-iconoir


  import { <ComponentName>Icon } from '@indaco/svelte-iconoir/<icon_name>';


  • : icon name as CamelCase notation
  • <icon_name>: the original icon name as per iconoir.com


  import { SunLightIcon } from '@indaco/svelte-iconoir/sun-light';
  // or...
  import SunLightIcon from '@indaco/svelte-iconoir/components/SunLightIcon.svelte';

Note: you can still import and use the icon as import { <component_name>Icon } from '@indaco/svelte-iconoir'; but this will have performace issue when the server run due to the import of the entire icons set.


The naming convention above has few exceptions breaking it:

  1. icons whose name starts with a number:
  2. icons for companies (github, youtube etc.):
    • to reflect the real company names (GitHub, YouTube, etc.).
Icon Name Component Name
1st-medal Medal1stIcon
2x2-cell Cell2x2Icon
3d-add-hole AddHole3dIcon
3d-arc-center-pt ArcCenterPt3dIcon
3d-arc Arc3dIcon
3d-bridge Bridge3dIcon
3d-center-box CenterBox3dIcon
3d-draft-face DraftFace3dIcon
3d-ellipse-three-pts EllipseThreePts3dIcon
3d-ellipse Ellipse3dIcon
3d-pt-box PtBox3dIcon
3d-rect-corner-to-corner RectCornerToCorner3dIcon
3d-rect-from-center RectFromCenter3dIcon
3d-rect-three-pts RectThreePts3dIcon
3d-select-edge SelectEdge3dIcon
3d-select-face SelectFace3dIcon
3d-select-point SelectPoint3dIcon
3d-select-solid SelectSolid3dIcon
3d-three-pts-box ThreePtsBoxe3dIcon
4k-display Display4kIcon
360-view View360Icon
github GitHubIcon
github-circle GitHubCircleIcon
gitlab-full GitLabFullIcon
linkedin LinkedInIcon
tiktok TikTokIcon
youtube YouTubeIcon

Styling Icons

You can apply your own styles to the icon components in different ways:

1. Direct

  import { SunLightIcon } from '@indaco/svelte-iconoir/sun-light';

<SunLightIcon class="roundedColor" />

 .roundedColor {
  padding: 4px;
  background-color: yellow;
  border-style: solid;
  border-color: #d1d5db;

2. Inline styles

 import { View360Icon } from '@indaco/svelte-iconoir/360-view';

 style="background-color: green; padding: 4px; border-radius: 9999px;"
 color="#ffffff" />

3. With Tailwind CSS

 import { ActivityIcon } from '@indaco/svelte-iconoir/activity';

<ActivityIcon class="p-1 rounded-full border-2 bg-green-400" size="2xl" />


Each icon component has the following properties to allow you customing the rendered svg:

Property Type Default Description
size IconSize base Set the size of the icon
color string none Set the fill colour to be applied to the icon
strokeWidth number 1.5 Set the width of the stroke to be applied to the icon
alt string icon name Set the aria-label attribute on the rendered svg
style string Set the style attribute on the rendered svg
class string Set the class attribute on the rendered svg
 * The size of the icon.
 * @typedef {('sm'|'base'|'lg'|'xl'|'2xl'|number)} IconSize
Size Value
sm 0.875rem
base 1rem
lg 1.125rem
xl 1.25rem
2xl 1.5rem

Event Forwarding

You can also override the click, dblclick events on an element.

 import { ActivityIcon } from '@indaco/svelte-iconoir/activity';

<ActivityIcon class="p-1 rounded-full border-6 bg-blue-300" on:click={() => alert("hi!")} size="2.5em" />

Dev Flow

git clone https://github.com/indaco/svelte-iconoir.git

cd svelte-iconoir

# Install all dependencies
pnpm install # (or npm, yarn)

# Generate Svelte components for each icon
pnpm generate:icons

# Package
pnpm build

## Run postbuild script
pnpm postbuild


Free and open-source software under the MIT License

Package Sidebar


Weekly Downloads






Unpacked Size

5.1 MB

Total Files


Last publish


  • indaco