mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
57 lines
2.6 KiB
Plaintext
57 lines
2.6 KiB
Plaintext
---
|
||
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.
|
||
|
||
## 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.
|