Tabler Icons
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 (5233 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.
Installation
Install the SVG package with your package manager of choice:
npm install @tabler/icons
yarn add @tabler/icons
pnpm add @tabler/icons
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 <img> 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.
<img src="path/to/icon.svg" alt="icon title" />
Inline SVG
Paste the content of the icon file directly into your HTML to render it inline.
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icons-tabler-outline icon-tabler-activity"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M3 12h4l3 8l4 -16l3 8h4" />
</svg>
Inline icons inherit currentColor, so you can change their size, color, and stroke-width with CSS.
.icon-tabler {
color: red;
width: 32px;
height: 32px;
stroke-width: 1.5;
}
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.
<svg width="24" height="24">
<use xlink:href="path/to/tabler-sprite.svg#tabler-activity" />
</svg>
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 with the .min.css suffix and SCSS sources are included as well.
<link rel="stylesheet" href="path/to/tabler-icons.min.css">
Use an icon with the ti base class and the ti-{name} modifier:
This is the beginning of the README. Read the rest at the original. Read the full README ↗
