SVG version
Installation
npm
pnpm
yarn
npm install @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;
}
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@3.31.0/icons/outline/home.svg" />
Filled version
<img src="https://unpkg.com/@tabler/icons@3.31.0/icons/filled/home.svg" />
Instead of a specific version, you can use latest to always get the newest icons.
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
