SVG version

Installation

• npm
• pnpm
• yarn

npm install @tabler/icons

pnpm install @tabler/icons

yarn 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

If you load an icon as an image, you can modify its size using CSS.

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

Inline HTML

You can paste the content of the icon file into your HTML code to display it on the page.

<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" class="icon icon-1">
    <path d="M11 5m-2 0a2 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>

Thanks to that, you can change the size, color and the stroke-width of the icons with CSS code.

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

SVG sprite

Add an icon to be displayed on your page with the following markup (activity in the above example can be replaced with any valid icon name):

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

CDN

Outline version

<img
  src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/outline/home.svg" />

Filled version

<img
  src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/filled/home.svg" />

Instead of a specific version, you can use latest to always get the newest icons.