Implementation of the Tabler Icons library for Svelte applications.
Browse all icons at tabler.io →
If you want to support our project and help us grow it, you can become a sponsor on GitHub or donate on PayPal.
npm install @tabler/icons-svelteyarn add @tabler/icons-sveltepnpm add @tabler/icons-svelteYou can also download the latest release from GitHub.
The package is built with ES modules, so unused icons are tree-shaken from your bundle. Each icon is exported as a component.
<script lang="ts">
import { IconHeart } from '@tabler/icons-svelte';
</script>
<IconHeart />Pass props to adjust the icon:
<IconHeart color="red" size={48} stroke={1.5} />| Name | Type | Default | Description |
|---|---|---|---|
size |
_number | string_ | 24 |
color |
string | currentColor | Stroke color for outline icons, fill color for filled icons |
stroke |
_number | string_ | 2 |
class |
string | – | Extra classes added to tabler-icon tabler-icon-{{name}} |
Any other attribute is forwarded to the rendered <svg> element. The package ships with TypeScript declarations.
Importing from the package root keeps your bundle small, because unused icons are removed. The bundler still has to compile every icon component (more than 6,000) before it can drop them, though, which slows down builds. To avoid that, import each icon from its own file:
<script lang="ts">
import IconHeart from '@tabler/icons-svelte/icons/heart';
import IconHeartFilled from '@tabler/icons-svelte/icons/heart-filled';
</script>
<IconHeart />
<IconHeartFilled />The path is the icon name in kebab-case, as listed on tabler.io/icons; filled icons end with -filled. Old icon names kept for backwards compatibility (aliases) are only exported from the package root.
With Vite 8 you can keep importing from the package root and let Rolldown skip compiling unused icons with lazy barrel optimization:
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
build: {
rolldownOptions: {
experimental: { lazyBarrel: true },
},
},
});This package targets Svelte 3 and 4 and also works in Svelte 5 in legacy mode. For projects using runes, install @tabler/icons-svelte-runes instead. The API is identical, only the package name changes.
Bug reports and icon requests are welcome in the issue tracker. Caught a mistake in this page? Edit it on GitHub.
Tabler Icons is licensed under the MIT License.