Skip to content

Latest commit

 

History

History

README.md

Tabler Icons for Svelte

Tabler Icons

Implementation of the Tabler Icons library for Svelte applications.

Browse all icons at tabler.io →

Latest release License

Sponsors

If you want to support our project and help us grow it, you can become a sponsor on GitHub or donate on PayPal.

Tabler sponsors

Installation

npm install @tabler/icons-svelte
yarn add @tabler/icons-svelte
pnpm add @tabler/icons-svelte

You can also download the latest release from GitHub.

Usage

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} />

Props

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 individual icons

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 },
    },
  },
});

Svelte 5

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.

Contributing

Bug reports and icon requests are welcome in the issue tracker. Caught a mistake in this page? Edit it on GitHub.

License

Tabler Icons is licensed under the MIT License.