Webfont

The Tabler Icons webfont adds icons with a CSS class, with no build step and no inline SVG.

Installation

npm install @tabler/icons-webfont

yarn add @tabler/icons-webfont

pnpm install @tabler/icons-webfont

bun install @tabler/icons-webfont

or just download from Github.

CDN

Link the stylesheet directly from a CDN if you do not want to install the package:

<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/tabler-icons.min.css"
/>

Swap the version for latest to always pull the newest icons, or keep it pinned so the set stays stable.

Usage

HTML

Add an icon with an <i> element. Use the ti base class together with a ti- class that names the icon:

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

CSS

Set the icon's character code in the content property of a pseudo-element to show an icon from CSS:

content: 'ec8f';

SCSS

In SCSS, use the generated $ti-icon-* variables instead of raw character codes:

content: $ti-icon-brand-tabler;