Tabler Icons

Tabler Icons provides a set of customizable and scalable SVG icons — a powerful tool for building modern, engaging interfaces.

Installation

All icons are Vue components that contain raw SVG elements.

This means you can import individual icons on demand and leverage tree-shaking to only bundle the icons you actually use, reducing your application's footprint.

Install with your preferred package manager:

NPM

npm install @tabler/icons-vue

Yarn

yarn add @tabler/icons-vue

PNPM

pnpm add @tabler/icons-vue

Bun

bun add @tabler/icons-vue

Or download directly from GitHub releases.

Usage

Import and use icons just like any other Vue component:

View code

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

<template>
    <IconHome />
    <IconSettingsFilled />
</template>

You can pass additional props to customize the icon:

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

Available Props

Name	Type	Default	Description
size	Number	24	Icon size (width/height)
color	String	currentColor	Icon color
stroke	Number	2	Icon stroke width