Tabler Icons for Vue

Sponsors

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

Installation

npm install @tabler/icons-vue

yarn add @tabler/icons-vue

pnpm add @tabler/icons-vue

You can also download the latest release from GitHub.

Usage

Every icon is a Vue component that renders an SVG element. Import only the icons you use, so the rest is tree-shaken from your bundle.

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

<template>
  <!-- basic usage -->
  <IconHome />

  <!-- set `stroke` color -->
  <IconHome color="red" />

  <!-- set `width` and `height` -->
  <IconHome size="36" />

  <!-- set `stroke-width` -->
  <IconHome stroke="1.5" />
</template>

With the Options API, register the icon in components:

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

export default {
  components: { IconHome },
};
</script>

Props

| Name | Type | Default | Description | | --- | --- | --- | --- | | size | number | string | 24 | Width and height of the icon | | color | string | currentColor | Stroke color for outline icons, fill color for filled icons | | stroke | number | string | 2 | Stroke width, outline icons only | | title | string | – | Adds a <title> element for accessibility |

Any other attribute, such as class or style, is forwarded to the rendered <svg> element. The package ships with TypeScript declarations.

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.