# SVG version

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

Download Tabler Icons as SVG files that scale without quality loss. Use them as images, backgrounds, or inline elements on the web.

Source: https://docs.tabler.io/icons/static-files/svg

---

![Tabler Icons in SVG format](/img/icons/package-svg.png)

## Installation

```shell
npm install @tabler/icons
yarn add @tabler/icons
pnpm install @tabler/icons
bun install @tabler/icons
```

or just [download from Github](https://github.com/tabler/tabler-icons/releases).

## 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.

```html
<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.

```html
<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.

```css
.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:

```html
<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:

```html
<img src="https://unpkg.com/@tabler/icons@3.46.0/icons/outline/home.svg" />
```

### Filled version

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

```html
<img src="https://unpkg.com/@tabler/icons@3.46.0/icons/filled/home.svg" />
```

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