Tabler Icons for Svelte (Runes)

Implementation of the Tabler Icons library for Svelte 5+ using the new runes reactivity system.

Browse all icons at tabler-icons.io →

Why This Package?

This package is specifically built for Svelte 5+ using the new runes reactivity system ($props(), $derived, etc.).

- For Svelte 5+ projects: Use this package (@tabler/icons-svelte-runes)
- For Svelte 3/4 projects: Use @tabler/icons-svelte

Installation

``bash
pnpm add @tabler/icons-svelte-runes
`

or

`bash
npm install @tabler/icons-svelte-runes
`

or

`bash
yarn add @tabler/icons-svelte-runes
`

Requirements

- Svelte 5.0+ with runes enabled
- For older Svelte versions, use @tabler/icons-svelte instead

Usage

It's built with ES modules so it's completely tree-shakable. Each icon can be imported as a component.

`svelte



`

You can pass additional props to adjust the icon:

`svelte

`

$3

| name | type | default |
| -------- | ------------------ | ------------ |
| size | number \| string | 24 |
| color | string | currentColor |
| stroke | number \| string | 2 |
| class | string | '' |

All other HTML attributes are forwarded to the SVG element.

TypeScript Support

The package includes full TypeScript definitions. Icons are typed as Svelte 5 Component:

`typescript
import type { Icon } from '@tabler/icons-svelte-runes';
import { IconHeart } from '@tabler/icons-svelte-runes';

// Icon is compatible with Svelte 5's Component type
const MyIcon: Icon = IconHeart;
`

$3

When passing icons as props, use the Component type or any for maximum compatibility:

`svelte




{label}

`

Examples

$3

`svelte





`

$3

`svelte


selected = 'heart'}>Heart
selected = 'star'}>Star
selected = 'circle'}>Circle
`

$3

`svelte



isLarge = !isLarge}>Toggle Size
`

Migrating from @tabler/icons-svelte

The API is identical, just change the package name:

`diff
- import { IconHeart } from '@tabler/icons-svelte';
+ import { IconHeart } from '@tabler/icons-svelte-runes';
`

No other changes needed! Your existing props and usage remain the same.

What's Different from @tabler/icons-svelte?

Internally, this package uses Svelte 5's new features:

- $props() instead of export let
- $derived for computed values
- Modern TypeScript Component` type
- Optimized for Svelte 5's fine-grained reactivity

Result: Better performance and smaller bundle sizes in Svelte 5 projects!

Sponsors

If you want to support this project, you can become a sponsor on GitHub or just donate on PayPal :)

Contributing

For more info on how to contribute please see the contribution guidelines.

Caught a mistake or want to contribute to the documentation? Edit this page on Github

License

Tabler Icons is licensed under the MIT License.

Sponsor Tabler