Vue Tabler Icons

2.21.0 · active · verified Sun Apr 19

`vue-tabler-icons` provides over 1250 pixel-perfect Tabler Icons as native Vue 3 components, with TypeScript definitions included. The current stable version is 2.21.0, and releases frequently synchronize with updates to the upstream `@tabler/icons` library, ensuring access to the latest icon sets. This library compiles all icons directly into JavaScript, eliminating the need for pre-processing steps. Key differentiators include direct Vue component usage, comprehensive TypeScript support, and straightforward customization options for size, color (via `currentColor`), and SVG attributes like `stroke-width`. It primarily supports Vue 3, while older Vue 2 applications can utilize the 1.x branch, though it receives delayed or discontinued updates.

Common errors

```
[Vue warn]: Failed to resolve component: <SomeIconName>
```
cause The icon component was not correctly imported or registered in the Vue application or component.

fix Ensure you have `import { SomeIconName } from 'vue-tabler-icons';` in your script and `components: { SomeIconName }` in your component options, or that you've correctly installed the global plugin (though not recommended).
```
Icons not visible or not rendering correctly (e.g., wrong size, unexpected alignment).
```
cause Incorrect sizing attributes or CSS conflicts. Upstream Tabler Icons updates might also occasionally affect sizing or positioning of SVG icons.

fix Use the `size` prop (e.g., `<HomeIcon size="48" />`) or `height`/`width` attributes directly on the component. Check for conflicting global CSS styles that might override SVG properties.
```
TypeScript IntelliSense or type checking warns about unknown properties on icon components (e.g., `:key`, custom SVG attributes).
```
cause TypeScript might not fully infer all standard HTML/SVG attributes or Vue-specific properties on dynamically generated Vue components.

fix While often ignorable if functionality is correct, ensure your TypeScript configuration is up-to-date. For custom SVG attributes like `stroke-width`, they are generally passed directly to the underlying SVG.

Warnings

breaking Version 2.x of `vue-tabler-icons` is exclusively for Vue 3 applications. If you are using Vue 2, you must install a 1.x version. The 1.x branch is no longer a priority and may receive delayed or discontinued updates.
Fix: For Vue 2 projects, install `yarn add vue-tabler-icons@^1.0` or `npm i vue-tabler-icons@^1.0`. For Vue 3, ensure your project's Vue version is compatible with `vue-tabler-icons` v2.x.
gotcha Installing `vue-tabler-icons` as a global Vue plugin (`Vue.use(VueTablerIcons)`) is explicitly not recommended by the library maintainers because it prevents effective tree-shaking, leading to larger bundle sizes.
Fix: Prefer importing individual icon components (e.g., `import { BoldIcon } from 'vue-tabler-icons';`) and registering them locally in your Vue components (`components: { BoldIcon }`). This allows bundlers to include only the icons actually used.
gotcha Icon component names follow a specific PascalCase convention, appending 'Icon' to the end and replacing underscores before numbers. Some names also have explicit replacements (e.g., `2fa.svg` becomes `TwoFactorAuthIcon`). Incorrect names will result in component resolution errors.
Fix: Consult the `vue-tabler-icons` documentation or the upstream Tabler Icons website for the exact PascalCase name of the icon you wish to use. For example, `arrows-diagonal-2` becomes `ArrowsDiagonal2Icon`.
gotcha Icons use `currentColor` by default. To change an icon's color, apply CSS `color` property via `style` attribute or a CSS class. Direct `color` props might not function as expected if not explicitly handled by the component.
Fix: Set the icon color using `style="color: yourColor"` or by applying a CSS class that defines the `color` property (e.g., `<bold-icon class="text-red" />`).

Install

npm install vue-tabler-icons npm
yarn add vue-tabler-icons yarn
pnpm add vue-tabler-icons pnpm

Imports

BoldIcon
wrong:
```
import BoldIcon from 'vue-tabler-icons/BoldIcon'; // Incorrect path or default import for named export
```
correct:
```
import { BoldIcon } from 'vue-tabler-icons';
```
Individual icons are named exports. Component names are PascalCase with 'Icon' suffix, e.g., `arrows-diagonal-2` becomes `ArrowsDiagonal2Icon`.

VueTablerIcons

wrong:

const VueTablerIcons = require('vue-tabler-icons'); // CommonJS syntax not recommended for Vue 3 ecosystem

correct:

import VueTablerIcons from 'vue-tabler-icons';
// then Vue.use(VueTablerIcons);

This imports the Vue plugin for global registration of all icons, which is generally not recommended for tree-shaking.

TrashIcon
```
import { TrashIcon } from 'vue-tabler-icons';
```
Named imports are preferred for optimal bundle size via tree-shaking.

Quickstart

Demonstrates importing and using individual Tabler icon components in a Vue 3 application, customizing their size, color, stroke width, and adding titles for accessibility.

import { createApp } from 'vue';
import { HomeIcon, SettingsIcon, UserIcon } from 'vue-tabler-icons';

const app = createApp({
  components: {
    HomeIcon,
    SettingsIcon,
    UserIcon,
  },
  template: `
    <div id="app">
      <h1>My Application</h1>
      <p>Welcome to the dashboard!</p>
      <home-icon size="32" style="color: #42b983;" />
      <settings-icon size="24" stroke-width="1.5" />
      <user-icon size="20" class="text-blue-500" />
      <p>Hover for tooltips:</p>
      <home-icon size="24" title="Go to Home" />
      <settings-icon size="24" title="Open Settings" />
    </div>
  `,
});

app.mount('#app');

view raw JSON →