Back to Tabler Icons

SVG version

docs/icons/svg.mdx

3.41.11.3 KB
Original Source

Installation

<TabsPackage name="@tabler/icons" />

or just download from Github.

Usage

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

HTML image

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

html

Inline HTML

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

html
<a href="">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="icon icon-tabler icon-tabler-disabled"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    stroke-width="1.25"
    stroke="currentColor"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    ...
  </svg>
  Click me
</a>

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

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

CDN

html

SVG sprite

See the SVG sprite version