SVG version

Use the SVG files for the web - they scale without quality loss and are easy to style.

Tabler Icons in SVG format

Installation

npm install @tabler/icons

yarn add @tabler/icons

pnpm install @tabler/icons

bun install @tabler/icons

or just download from Github.

Usage

All icons are built with SVG, so you can place them as <img>, background-image and inline in HTML code.

HTML image

When you load an icon as an image, set its size with CSS.

<img src="path/to/icon.svg" alt="icon title" />

Inline HTML

Paste the content of the SVG file into your HTML to render it inline.

<a href>
  <!-- Download SVG icon from http://tabler.io/icons/icon/disabled -->
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
    <path d="M9 5a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
    <path d="M11 7l0 8l4 0l4 5" />
    <path d="M11 11l5 0" />
    <path d="M7 11.5a5 5 0 1 0 6 7.5" />
  </svg> Click me
</a>

Inline SVG picks up CSS, so you can set the size, the color and the stroke-width from your stylesheet.

.icon-tabler {
  color: red;
  width: 32px;
  height: 32px;
  stroke-width: 1.25;
}

SVG sprite

Reference an icon from the sprite with use. Replace activity with any icon name:

<svg width="24" height="24">
  <use xlink:href="path/to/tabler-sprite.svg#tabler-activity" />
</svg>

CDN

Outline version

Load the outline version of an icon as an image straight from the icons/outline directory of the CDN package:

<img src="https://unpkg.com/@tabler/[email protected]/icons/outline/home.svg" />

Filled version

Use the icons/filled path to load the filled version of an icon:

<img src="https://unpkg.com/@tabler/[email protected]/icons/filled/home.svg" />

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

Menu