tabler / tabler-icons

# Tabler Icons
 A set of 6238 free, MIT-licensed, high-quality SVG icons for your web projects. Each icon is designed on a 24x24 grid with a 2px stroke.
 Browse all icons at tabler.io → 
## Sponsors
**If you want to support our project and help us grow it, you can become a sponsor on GitHub or donate on PayPal.**
## Preview
### Outline version ( 5184 icons)
### Filled version ( 1054 icons)
## Packages
Tabler Icons is distributed as a set of official packages, one for each format and framework. All packages are published to npm from this repository and share the same version number. The full documentation is available at tabler.io/docs/icons.
| Package | Description | Documentation |
| --- | --- | --- |
| `@tabler/icons` | Raw SVG files (outline and filled) with icon metadata | SVG |
| `@tabler/icons-sprite` | SVG sprite with all icons | Sprite |
| `@tabler/icons-webfont` | Icon font with CSS and SCSS files | Webfont |
| `@tabler/icons-react` | React components | React |
| `@tabler/icons-react-native` | React Native components | React Native |
| `@tabler/icons-preact` | Preact components | Preact |
| `@tabler/icons-vue` | Vue 3 components | Vue |
| `@tabler/icons-svelte` | Svelte 4 components | Svelte |
| `@tabler/icons-svelte-runes` | Svelte 5 components (runes) | Svelte 5 |
| `@tabler/icons-solidjs` | SolidJS components | SolidJS |
| `@tabler/icons-astro` | Astro components | Astro |
| `@tabler/icons-angular` | Angular component and icon providers | Angular |
| `@tabler/icons-png` | PNG files | PNG |
| `@tabler/icons-pdf` | PDF files | PDF |
| `@tabler/icons-eps` | EPS files | EPS |
## Installation
Install the SVG package with your package manager of choice:
 [code] 
 [code] 
 [code] 
Replace `@tabler/icons` with any package from the table above to install a framework-specific version.
You can also download the latest release from GitHub.
## Usage
### SVG
All icons are plain SVG files, so you can use them as an ` ` source, as a CSS `background-image`, or inline in your HTML.
#### HTML image
When you load an icon as an image, you can control its size with CSS.
 [code] 
#### Inline SVG
Paste the content of the icon file directly into your HTML to render it inline.
 [code] 
Inline icons inherit `currentColor`, so you can change their size, color, and `stroke-width` with CSS.
 [code] 
### SVG sprite
Install `@tabler/icons-sprite` and reference an icon by its name prefixed with `tabler-`. Replace `activity` in the example below with any valid icon name.
 [code] 
The package also ships `tabler-sprite-filled.svg` for filled icons and `tabler-sprite-nostroke.svg` for outline icons without a fixed stroke width.
### Webfont
Install `@tabler/icons-webfont` and include one of the stylesheets from the `dist` directory.
| Stylesheet | Icons | Stroke width |
| --- | --- | --- |
| `tabler-icons.css` | Outline | 2 |
| `tabler-icons-300.css` | Outline | 1.5 |
| `tabler-icons-200.css` | Outline | 1 |
| `tabler-icons-filled.css` | Filled | – |
Minified variants wit