# svelte-remixicon

> An icon library for Svelte/SvelteKit based on Remix Icon. Consists of more than 3000 icons.

Latest version **2.10.1** (published 2026-09-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-remixicon
pnpm add svelte-remixicon
yarn add svelte-remixicon
bun add svelte-remixicon
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.10.1 |
| Published | 2026-09-15 |
| First published | 2021-07-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 48 |
| Author | Antu Saha |
| Maintainers | antusaha |
| Keywords | svelte, sveltekit, remixicon, svg icon, icon library, icon |

## Links

- npm: https://www.npmjs.com/package/svelte-remixicon
- Repository: https://github.com/aantusahaa/svelte-remixicon
- npm.io page: https://npm.io/package/svelte-remixicon

## 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
- [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads

## Recent versions

- 2.10.1 (latest) — 2026-09-15
- 2.10.0 — 2026-02-10
- 2.9.1 — 2026-01-16
- 2.9.0 — 2026-01-11
- 2.8.0 — 2025-10-13
- 2.7.1 — 2025-10-12
- 2.7.0 — 2024-12-22
- 2.6.1 — 2024-11-02
- 2.6.0 — 2024-11-02
- 2.5.0 — 2024-06-17
- 2.4.1 — 2024-05-25
- 2.4.0 — 2024-03-02
- 2.3.0 — 2024-01-30
- 2.2.0 — 2024-01-02
- 2.1.0 — 2023-11-13
- … 8 more at https://npm.io/package/svelte-remixicon/versions

## README

# svelte-remixicon: A vibrant icon library for your Svelte/SvelteKit app

If you're looking for a way to add visually stunning icons to your Svelte/SvelteKit project, you're in luck! `svelte-remixicon` is a comprehensive icon library built with the popular [Remix Icon](https://github.com/Remix-Design/remixicon) pack. With a total of 3229 icons available, you'll have plenty of options to choose from to bring some color and personality to your app.

## Easy installation

Getting started with `svelte-remixicon` is a breeze. All you have to do is run the following command:

```bash
npm install --save-dev svelte-remixicon
```

## Simple usage

Using `svelte-remixicon` couldn't be simpler. Just import the icons you want to use, and you're ready to go! For example:

```html
<script>
  import { RiRemixiconLine, RiRemixiconFill } from "svelte-remixicon";
</script>

<!-- Or (Recommended for faster compilation in dev mode)-->

<script>
  import RiRemixiconLine from "svelte-remixicon/RiRemixiconLine.svelte";
  import RiRemixiconFill from "svelte-remixicon/RiRemixiconLineFill.svelte";
</script>

Almost every icon has two variants. One is line: <RiRemixiconLine /> and the
other is fill: <RiRemixiconFill />
```

And that's it! You can check out all the available icons on the [Remix Icon website](https://remixicon.com/).

### Custom styling

If you want to customize the appearance of your icons, you can easily do so by adding your own classes to the icon components. For example:

```html
<style>
  :global(svg.xyz) {
    margin-block: 3rem;
  }
</style>

<RiRemixiconLine class="xyz" />
```

You will also find the class `remixicon` and `ri-<icon-name>` on the svg element by default. You can use them to style the icons as well.

## Component naming

To make it easy to find the icons you need, we've used the same names as the original Remix Icon library. For example:

- `ri-home-line` ⇒ `RiHomeLine`
- `ri-message-3-fill` ⇒ `RiMessage3Fill`
- and so on...

## Available props

Each icon component comes with a range of available props to customize its appearance. These include:

| prop name | default value  | usable value                                | description                                                                                                                                                                                                                     |
| --------- | -------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| size      | `1em`          | any valid `width/height` attribute          | determines the `width` and `height` of the icon                                                                                                                                                                                 |
| color     | `currentColor` | any valid `color` value for svg             | determines the `fill` of the icon                                                                                                                                                                                               |
| class     | `''`           | any valid string for html `class` attribute | custom class for custom styling                                                                                                                                                                                                 |
| label     | `''`           | any string to be used as `aria-label`       | should be used when the svg icon is used as an image/graphic element. It will also add `role="img"` to the svg element. If not passed then `aria-hidden="true"` will be added to the svg element to hide it from screen readers |

`$$restProps` was also passed down.

## Using events

The icon components themselves do not propagate events. Non-interactive elements should not have such events that rely on user interaction. If you wish to capture a `click` event on an icon, it is recommended to enclose the icon within a `button` or `a` tag and attach the event handler to that container.

```html
<script>
  import RiRemixiconLine from "svelte-remixicon/RiRemixiconLine.svelte";

  function handleClick() {
    console.log("Icon clicked!");
  }
</script>

<button on:click="{handleClick}">
  <RiRemixiconLine />
</button>
```

## License

The `svelte-remixicon` licensed under the [MIT License](https://github.com/aantusahaa/svelte-remixicon/blob/main/LICENSE).

The included icon artwork is Copyright © 2017–2026 Remix Design and remains subject to the [Remix Icon License v1.0](https://github.com/Remix-Design/RemixIcon/blob/master/License).

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