Guide · Open source

How to use tabler-icons: install and add icons to web projects

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Tabler Icons is an open-source set of over 6,000 free, MIT-licensed SVG icons for web projects. This guide shows you how to install the packages and add icons to a page as plain SVG, sprite, webfont or framework components. By the end you will know which package fits your project and how to change an icon's size, color and stroke width.

Tabler Iconstabler/tabler-icons · ★ 22.5k · MIT Install options & downloads

Quick start

1Install the package. Run npm install @tabler/icons, or use yarn add or pnpm add with the same package name.
2Pick a format. Choose plain SVG, sprite, webfont or a framework package that matches your project.
3Add an icon. Use an img tag or inline SVG for plain HTML, or import a component in React or another supported framework.
4Style the icon. Set size, color and stroke-width with CSS, since inline icons inherit currentColor.
5Browse and pick names. Browse all icons at tabler.io/icons and use the icon name in your sprite, webfont or component code.

What you need before you install Tabler Icons

The package-manager install shown in the project README requires Node.js and one of npm, yarn or pnpm. If you use a different method, such as downloading the latest release from GitHub, those tools are not needed.

Node.js with npm, yarn or pnpm for the package install
Or download the latest release from the GitHub releases page

Install the Tabler Icons package

Install the SVG package with the package manager you already use. Each command below installs the same package, @tabler/icons.

To get a framework-specific version instead, replace @tabler/icons with a package from the project's package table, such as @tabler/icons-react or @tabler/icons-vue.

npm install @tabler/icons

Choose the right format for your project

Tabler Icons is published as one package per format and framework, all sharing the same version number. Pick the one that matches how your project renders icons.

Plain SVG files work as an img source, a CSS background-image or inline HTML. The sprite package lets you reference icons by name. The webfont package provides CSS classes. Framework packages give you components for React, Preact, React Native, Vue 3, Svelte 4 and 5, SolidJS, Astro and Angular.

@tabler/icons: raw SVG files (outline and filled)
@tabler/icons-sprite: SVG sprite with all icons
@tabler/icons-webfont: icon font with CSS and SCSS
@tabler/icons-react, -vue, -svelte, -solidjs, -astro, -angular: framework components
@tabler/icons-png, -pdf, -eps: PNG, PDF and EPS files

Add an icon as inline SVG or an image

Load an icon as an image with an img tag, or paste the contents of the icon file directly into your HTML. Inline icons inherit currentColor, so CSS can change their size, color and stroke width.

Inline SVG example: the icon uses a 24x24 viewBox and a stroke width of 2 by default. Adjust it with a class in your stylesheet, as in the README example.

Use an img tag when you only need to display the icon
Use inline SVG when you want CSS to control color and stroke

<img src="path/to/icon.svg" alt="icon title" />

Change the size, color and stroke width with CSS

Because inline icons use currentColor, you can set color, width, height and stroke-width in a regular CSS rule that targets the icon class. The README uses the icon-tabler class in its example.

The stroke-width value in the example is 1.5, which is thinner than the default 2px stroke the project describes for its 24x24 grid.

.icon-tabler {
  color: red;
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
}

Use icons in React, Vue or other frameworks

For React, import icon components from @tabler/icons-react. The package uses ES modules, so unused icons are removed from your bundle by tree-shaking. Each component accepts props such as size, color and stroke, and other SVG attributes are passed through.

The package ships its own TypeScript types. Other framework packages, such as @tabler/icons-vue and @tabler/icons-svelte, are installed the same way.

size sets width and height
color sets the stroke color
stroke sets stroke-width

import { IconAward } from '@tabler/icons-react';

const MyComponent = () => {
  return (
    <IconAward
      size={36}
      color="red"
      stroke={3}
      strokeLinejoin="miter"
    />
  );
};

What people use it for

Styling buttons, menus and navigation in a website
Adding consistent icons to a dashboard or admin panel
Using React, Vue, Svelte or Astro icon components in an app
Changing icon stroke width or color with plain CSS

Frequently asked questions

Is Tabler Icons free to use?

Yes. The README states that the icon set is released under the MIT license and is free to use. You can check the LICENSE file in the repository for the full terms.

What do I need to install Tabler Icons?

The package-manager install in the README needs Node.js and npm, yarn or pnpm. You can also download the latest release from GitHub if you do not use a package manager.

How do I install Tabler Icons with npm?

Run npm install @tabler/icons. The README gives the same install with yarn add @tabler/icons and pnpm add @tabler/icons.

How do I use Tabler Icons in React?

Install @tabler/icons-react, then import a component such as IconAward and render it. You can set size, color and stroke as props.

Can I change the stroke width or color of Tabler Icons?

Yes. Inline SVG icons inherit currentColor, so CSS can set color and stroke-width. React components accept color and stroke props.

How does Tabler Icons compare to Lucide or Heroicons?

The README does not compare Tabler Icons with other projects, so this guide cannot rank them. Lucide, Heroicons, Font Awesome and Bootstrap Icons are listed as comparable projects, and you can review each icon set's license and format support before choosing.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Tabler Icons suits web developers who need a large, consistent set of free icons for buttons, menus and dashboards, especially in React, Vue, Svelte or Astro. It is a general-purpose set, so teams that need a unique brand icon style or non-web formats should look at other options or design their own icons.

Install options & downloads