SVG version
Installation
yarn
npm
pnpm
yarn add @tabler/iconsor 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="">
<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.
.icon-tabler {
color: red;
width: 32px;
height: 32px;
stroke-width: 1.25;
}
CDN
<img src="https://unpkg.com/@tabler/icons@3.19.0/icons/home.svg" />
SVG sprite
See the SVG sprite version
Browse all icons at Tabler Icons website.
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like Tabler? tweet about it!
Support Tabler's development: Github Sponsors
