tabler/tabler-icons

Overview

Tabler Icons is a free, MIT-licensed SVG icon collection for web projects. The current README counts 6,287 icons in total, split into 5,233 outline icons and 1,054 filled icons. Every icon is drawn on a 24×24 grid with a 2 px stroke; outline paths are designed to stay legible when the stroke width is changed. The project targets developers and designers who need a consistent icon family across HTML, CSS, and component frameworks.

The icons are published as official npm packages from this repository, all sharing one version number. Beyond raw SVGs and an SVG sprite, there are packages for React, React Native, Preact, SolidJS, Vue 3, Svelte 4, Svelte 5 (runes), Astro, and Angular, plus webfont, PNG, PDF, and EPS formats. Full documentation lives at tabler.io/docs/icons, and all icons can be browsed at tabler.io/icons.

Quick start

1. Install the base SVG package with npm, yarn, or pnpm:

npm install @tabler/icons

2. For a framework integration, replace the package name with the matching one, for example npm install @tabler/icons-react for React components, which are ES modules and tree-shake unused icons from the bundle.

3. Use the icons in the way that fits your stack:

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

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

For plain SVG, use an <img> with the icon path, or paste the SVG inline and style it with CSS; inline outline icons inherit currentColor, so color, size, and stroke-width can be set from CSS. You can also load icons directly from jsDelivr, e.g. https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/outline/home.svg, replacing latest with a version number to pin a release. If you don't want a package manager, the latest release contains downloadable assets. Each icon's exact import path and component name follow its icon name, browsable in the online catalog.

Usage constraints

The SVG files are the common denominator; everything else is a wrapper. React components ship TypeScript declarations, and the Angular package uses a standalone TablerIconComponent that registers icons through provideTablerIcons(). For Svelte, the package differs by major version: use @tabler/icons-svelte for Svelte 4 and earlier and @tabler/icons-svelte-runes for Svelte 5; choosing the wrong one will not match your compiler. The webfont approach requires linking a stylesheet and then using ti ti-{name} classes, with separate stylesheets for outline stroke widths and a filled variant.

The icon set follows a 2 px stroke design, so adopting it wholesale affects the visual language of an existing UI. Community integrations such as angular-tabler-icons and compose-icons are maintained outside this repository and are not covered by its package guarantees. The code and icons are MIT-licensed, so commercial use is permitted under that license.

HotRepo's take

There is little all-languages daily ranking history for this repository in HotRepo's records; the one recorded snapshot is a JavaScript daily entry on 2026-11-13 at 22,619 stars, 1,274 forks, and 18 stars gained that day, placing ninth within that language list. That single data point supports only the fact of a recent appearance, not a trend, and the repository's roughly six years of history and 6,000+ icons remain the more meaningful signal for evaluating it as a long-lived asset. In the 2020 Hacker News thread that introduced the set, commenters noted its balanced spacing and consistent look (discussion); another commenter suggested using the releases page for downloads rather than fetching icons individually (comment), which is still the practical route for users who don't want a package manager. A later thread titled "Sneaking Ads into OSS: Tabler Icons" has no comment text in the provided data, so it cannot be assessed from this material.