# @indaco/svelte-iconoir

> Iconoir SVG icons as Svelte components.

Latest version **7.11.1** (published 2025-05-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @indaco/svelte-iconoir
pnpm add @indaco/svelte-iconoir
yarn add @indaco/svelte-iconoir
bun add @indaco/svelte-iconoir
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 7.11.1 |
| Published | 2025-05-20 |
| First published | 2021-10-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 3.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | indaco |
| Maintainers | indaco |
| Keywords | iconoir, icons, icons-set, svelte, svelte components, sveltekit, svg-icons |

## Links

- npm: https://www.npmjs.com/package/@indaco/svelte-iconoir
- Repository: https://github.com/indaco/svelte-iconoir
- Homepage: https://github.com/indaco/svelte-iconoir#readme
- Issues: https://github.com/indaco/svelte-iconoir/issues
- npm.io page: https://npm.io/package/@indaco/svelte-iconoir

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 7.11.1 (latest) — 2025-05-20
- 7.11.0 — 2025-04-24
- 7.10.1 — 2025-01-13
- 7.10.0 — 2024-11-16
- 7.9.0 — 2024-09-09
- 7.8.0 — 2024-07-27
- 7.7.0 — 2024-04-25
- 7.6.0 — 2024-04-06
- 7.5.0 — 2024-03-04
- 7.4.0 — 2024-02-12
- 7.1.0 — 2024-01-10
- 7.0.0 — 2023-12-18
- 6.1.0 — 2023-12-03
- 6.0.3 — 2023-11-03
- 6.0.2 — 2023-11-02
- … 44 more at https://npm.io/package/@indaco/svelte-iconoir/versions

## README

<div align="center">
    <h1>Svelte Iconoir</h1>
    <a href="https://github.com/indaco/svelte-iconoir/actions/workflows/release.yml" target="_blank">
        <img src="https://github.com/indaco/svelte-iconoir/actions/workflows/release.yml/badge.svg" alt="CI" />
    </a>
    &nbsp;
    <a href="https://github.com/indaco/svelte-iconoir/blob/main/LICENSE" target="_blank">
        <img src="https://img.shields.io/badge/license-mit-blue?style=flat-square&logo=none" alt="license" />
    </a>
    &nbsp;
    <a href="https://www.npmjs.com/package/@indaco/svelte-iconoir" target="_blank"><img src="https://img.shields.io/npm/v/@indaco/svelte-iconoir.svg?style=flat" alt="NPM Package" /></a>
</div>

The entire [iconoir](https://github.com/lucaburgio/iconoir) set (1600+ SVG icons) as Svelte components.

See all available icons on the **iconoir** [homepage](https://iconoir.com/).

## Install

```bash
# npm
npm install @indaco/svelte-iconoir

# pnpm
pnpm add @indaco/svelte-iconoir

# yarn
yarn add @indaco/svelte-iconoir
```

## Usage

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

where:

- `<ComponentName>`: named as _PascalCase_ variations of the icon name
- `<icon_variant>`:
  - `regular` variant is the **default one and does not need to be specified**
  - `solid` (check on [iconoir.com](https://iconoir.com) if available)
- `<icon_name>`: the original icon name as per iconoir.com

### Example

```html
<script>
  import { SunLightIcon } from '@indaco/svelte-iconoir/sun-light';

  // variant `solid`
  import { MinusCircleIcon } from '@indaco/svelte-iconoir/solid/minus-circle';
</script>
```

### Exceptions

The naming convention above has few exceptions breaking it:

1. icons for companies (github, youtube etc.):
   - to reflect the real company names (GitHub, YouTube, etc.).

| Icon Name     | Component Name   |
| :------------ | :--------------- |
| 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

```html
<script>
  import { SunLightIcon } from '@indaco/svelte-iconoir/sun-light';
</script>

<SunLightIcon class="roundedColor" />

<style>
  .roundedColor {
    padding: 4px;
    background-color: yellow;
    border-style: solid;
    border-color: #d1d5db;
  }
</style>
```

### 2. Inline styles

```html
<script>
  import { SunLightIcon } from '@indaco/svelte-iconoir/sun-light';
</script>

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

### 3. With Tailwind CSS

```html
<script>
  import { SunLightIcon } from '@indaco/svelte-iconoir/sun-light';
</script>

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

## Properties

Each icon component can take any attribute of a normal SVG Element, for example:

```html
<ZoomOutIcon fill="red" stroke-width="3" />
```

In addition to these, each component can take the following properties:

| Property | Type       | Default   | Description                                    |
| :------- | :--------- | :-------- | :--------------------------------------------- |
| size     | `IconSize` | `base`    | Set the attributes `width` and `height`        |
| altText  | `string`   | icon name | Set the `aria-labelledby` attribute on the svg |

The underlying properties can also be set and overridden manually, e.g. setting `width` explicitly takes precedence over `size`.

```javascript
/**
 * The size of the icon.
 * @typedef {(‘xs’|’sm’|’base’|’lg’|’xl’|number|string)} IconSize
 */
```

| Size |    Value |
| :--- | -------: |
| xs   |    `1em` |
| sm   | `1.25em` |
| base |  `1.5em` |
| lg   | `1.75em` |
| xl   |    `2em` |

## Event Forwarding

The following events are _forwarded_.

| Name            |
| :-------------- |
| `on:click`      |
| `on:dblclick`   |
| `on:keyup`      |
| `on:keydown`    |
| `on:mouseenter` |
| `on:mouseleave` |

For example, you can set the `on:click` event on all icons.

```html
<script>
  import { SunLightIcon } from '@indaco/svelte-iconoir/sun-light';
</script>

<SunLightIcon on:click="{()" =""> alert("hi!")} /></SunLightIcon>
```

## Dev Flow

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

cd svelte-iconoir

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

# Update Iconoir submodule
git submodule update --remote

# Generate Svelte components for each icon
pnpm generate:icons

# Package
pnpm build

## Run postbuild script
pnpm postbuild
```

## License

Free and open-source software under the [MIT License](LICENSE)

---
_Source: https://npm.io/package/@indaco/svelte-iconoir · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._