# 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.

Over 5000 pixel-perfect icons for web design and development

Source: https://docs.tabler.io/icons

---

<figure>
	
	
</figure>

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](https://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](/icons/libraries/react), [Vue](/icons/libraries/vue), [Svelte](/icons/libraries/svelte), [SolidJS](/icons/libraries/solidjs), [Preact](/icons/libraries/preact) and [Astro](/icons/libraries/astro). Icons are tree-shakable components, so only the ones you import end up in your bundle.
- **[Webfont](/icons/libraries/webfont)**: add icons with plain CSS classes, no build step needed.
- **[Static files](/icons/static-files)**: every icon as a standalone [SVG](/icons/static-files/svg), [PNG](/icons/static-files/png) or [PDF](/icons/static-files/pdf) file, for design tools and non-web use.
- **[Figma plugin](/icons/plugins/figma)**: 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](/icons/design-guide).

## Quick start

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

```shell
npm install @tabler/icons-react
yarn add @tabler/icons-react
pnpm install @tabler/icons-react
bun install @tabler/icons-react
```

```jsx
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:

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.48.0/dist/tabler-icons.min.css"
/>
```

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

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