---
title: Tabler Icons
summary: 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.
order: 2
description: Over 5000 pixel-perfect icons for web design and development
---

import TabsPackage from '@components/TabsPackage.astro'
import { Code } from 'astro:components'
import { Image } from 'astro:assets'
import { site } from '@shared/lib/site'
import coverLight from '../../images/cover-icons.jpg'
import coverDark from '../../images/cover-icons-dark.jpg'

<figure>
	<Image src={coverLight} alt="Tabler Icons" class="hide-theme-dark" width={800} densities={[1, 2]} loading="eager" />
	<Image src={coverDark} alt="Tabler Icons" class="hide-theme-light" width={800} densities={[1, 2]} loading="eager" />
</figure>

Tabler Icons is a library of { site.iconsCount } 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:

<TabsPackage name="@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:

<Code lang="html" code={`<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@${site.iconsVersion}/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.