Tabler Icons for Vue

Implementation of the Tabler Icons library for Vue 3 applications.

Browse all icons at tabler-icons.io →

Sponsors

If you want to support my project and help me grow it, you can become a sponsor on GitHub or just donate on PayPal :)

Installation

yarn add @tabler/icons-vue

or

npm install @tabler/icons-vue

or

pnpm install @tabler/icons-vue

or just download from Github.

How to use

All icons are Vue components that contain SVG elements. So any icon can be imported and used as a component. It also helps to use threeshaking, so you only import the icons you use.

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

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

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

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

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

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

or with <script setup>

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

<template>
  <IconHome color="red" size="36" strokeWidth="2"/>
</template>

You can pass additional attribute stroke-width="1" alongside the props to adjust the icon.

<IconHome color="red" size="48" stroke-width="1" />

Props

Contributing

For more info on how to contribute please see the contribution guidelines.

Caught a mistake or want to contribute to the documentation? Edit this page on Github

License

Tabler Icons is licensed under the MIT License.

Sponsor Tabler