---
title: SVG version
summary: Use the SVG files for the web - they scale without quality loss and are easy to style.
description: Download Tabler Icons as SVG files that scale without quality loss. Use them as images, backgrounds, or inline elements on the web.
---

import TabsPackage from '@components/TabsPackage.astro'
import Icon from '@ui/Icon.astro'
import Example from '@components/Example.astro'

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

## Installation

<TabsPackage name="@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

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

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

<Example codeOnly>
  <a href="">
    <Icon name="disabled" />
    Click me
  </a>
</Example>

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;
}
```

### 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):

```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@$ICONS_VERSION/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@$ICONS_VERSION/icons/filled/home.svg" />
```

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