Tabler Icons

Tabler Icons is a library of over 5,000 SVG icons drawn on a 24×24 grid. It ships as framework packages, a webfont, static files and a Figma plugin.

Tabler Icons is a library of 5166 icons. All of them are drawn on a 24×24 pixel grid with a consistent stroke, so they line up and scale cleanly at any size.

To browse the collection, visit tabler.io/icons. You can search by name or browse by category, then copy the SVG code or download the icon straight from the site.

What's inside

The same icon set is distributed in several forms, so you can pick the one that fits your stack:

• Framework libraries: official packages for React, Vue, Svelte, SolidJS, Preact and Astro. Icons are tree-shakable components, so only the ones you import end up in your bundle.
• Webfont: add icons with plain CSS classes, no build step needed.
• Static files: every icon as a standalone SVG, PNG or PDF file, for design tools and non-web use.
• Figma plugin: insert icons directly into your Figma designs.

To draw your own icons that match the set, or to request a new one, see the icon design guide.

Quick start

In a framework project, install the package for your stack, for example React:

npm install @tabler/icons-react

yarn add @tabler/icons-react

pnpm install @tabler/icons-react

bun install @tabler/icons-react

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

<IconArrowLeft />

Without a build step, link the webfont stylesheet from a CDN and add icons with an <i> element:

<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/tabler-icons.min.css"
/>

<i class="ti ti-brand-tabler"></i>

Each library page covers installation, usage and styling options for its framework in detail.