Tabler Icons Webfont

Sponsors

If you want to support our project and help us grow it, you can become a sponsor on GitHub or donate on PayPal.

Installation

npm install @tabler/icons-webfont

yarn add @tabler/icons-webfont

pnpm add @tabler/icons-webfont

You can also download the latest release from GitHub.

Usage

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. Font files are located in dist/fonts.

<link rel="stylesheet" href="path/to/tabler-icons.min.css">

HTML

Use an icon with the ti base class and the ti-{name} modifier:

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

CSS

Use the icon's unicode value, listed in icons.json of the @tabler/icons package:

content: '\ec8f';

SCSS

Import the SCSS source and use the generated variable:

content: $ti-icon-brand-tabler;

Font loading

The font is split into chunks: one with the most popular icons and one per icon category (dist/fonts/tabler-icons.<chunk>.woff2). The filled font, which is much smaller, has only two: the popular icons and the rest. Each chunk has its own unicode-range, so the browser downloads only the chunks with icons shown on the page.

To load the whole font from a single file instead, set $ti-font-split before importing the SCSS source:

@use '@tabler/icons-webfont/dist/tabler-icons.scss' with ($ti-font-split: false);

CDN

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

Replace latest with a specific version number to pin a release.

Contributing

Bug reports and icon requests are welcome in the issue tracker. Caught a mistake in this page? Edit it on GitHub.

License

Tabler Icons is licensed under the MIT License.