Framework guide

Use Tabler icons in Svelte

For Svelte 5, use the package built with runes. Import each icon as a component and pass its size, stroke, and color directly in your markup.

Install the package

npm install @tabler/icons-svelte-runes

This example uses Svelte 5. For Svelte 4 and earlier, use @tabler/icons-svelte.

Create a labeled button

The text names the action. Hide the decorative SVG from assistive technology so the button label does not repeat.

SaveButton.svelte

<script>
  import { IconHeart } from '@tabler/icons-svelte-runes';
</script>

<button type="button">
  <IconHeart size={20} stroke={1.5} aria-hidden="true" />
  Save item
</button>

Use a filled variant

Filled components use the Filled suffix where that variant exists. Change their size or color. The stroke prop applies to outline icons.

<script>
  import { IconHeartFilled } from '@tabler/icons-svelte-runes';
</script>

<button type="button" aria-label="Remove from saved items">
  <IconHeartFilled size={20} color="crimson" aria-hidden="true" />
</button>

Match your interface

For Svelte 4 and earlier, install @tabler/icons-svelte instead. The icon names and customization props are similar, but the packages target different Svelte versions.

Icons inherit the surrounding text color by default. Keep their dimensions consistent with nearby controls. Use a visible label when a symbol could have several meanings.

Choose an icon

Open the heart icon to compare available styles and copy its code. Browse topic collections or the complete catalog for another symbol.

Check the upstream package documentation for other integrations. Read the icon license and attribution before distribution.