Framework guide

Use Tabler icons in Vue

Import icon components inside a Vue single-file component. Use bound props for numeric sizes and stroke widths, just as you would with other Vue components.

Install the package

npm install @tabler/icons-vue

Create a labeled button

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

SaveButton.vue

<script setup>
import { IconHeart } from '@tabler/icons-vue';
</script>

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

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 setup>
import { IconHeartFilled } from '@tabler/icons-vue';
</script>

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

Match your interface

Bind size and stroke with a colon when you pass numbers. You can bind these props to reactive values to match a control or state in your interface.

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.