Icons
Use one of over 5000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
If you need to add icons to your website, you can use the Tabler Icons library. It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects. You can find the Tabler Icons library here.
Base icon
To add icon to your code copy the SVG code from the Tabler Icons website and paste it into your HTML file.
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
</svg>
Results can be seen in the example below.
Filled icons
To use filled icons, you need to copy the SVG code from the Tabler Icons website and paste it into your HTML file.
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
</svg>
Look at the example below to see the filled icons.
Icon colors
To change the color of the icon, you need to add the text- class to the parent element of the icon. Full list of available colors can be found here. Color classes can be used with any HTML element.
<span class="text-red">
<!-- SVG icon from http://tabler.io/icons/icon/heart -->
<svg>...</svg>
</span>
Look at the example below to see how the color of the icon changes.
Icon animations
To add an animation to the icon, you need to add the icon-pulse, icon-tada, or icon-rotate class to the SVG element.
<!-- SVG icon from http://tabler.io/icons/icon/heart -->
<svg class="icon-pulse" ...>...</svg>
<!-- SVG icon from http://tabler.io/icons/icon/bell -->
<svg class="icon-tada" ...>...</svg>
<!-- SVG icon from http://tabler.io/icons/icon/rotate-clockwise -->
<svg class="icon-rotate" ...>...</svg>
Look at the example below to see the animated icons.
