Icon

We use the Tabler icon font family for icons.

To view the entire Tabler icon library, download image files, and find the packages, visit the website.

To work with the icons in Figma, you can use the official Figma plugin.

For more information on development, including how to use the React package, visit the GitHub page.

Icons usually go inside an i tag. They always include .i, along with i-[icon-name].

There are also several sizes, from i-05 to i-40 (the default size is equivalent to i-10).

Use i-fw if you're using icons in a list and want them all to be the same width.

<p><i class="i i-05 i-settings"></i></p>
<p><i class="i i-settings"></i> Default</p>
<p><i class="i i-15 i-settings"></i></p>
<p><i class="i i-20 i-settings"></i></p>
<p><i class="i i-25 i-settings"></i></p>
<p><i class="i i-30 i-settings"></i></p>
<p><i class="i i-35 i-settings"></i></p>
<p><i class="i i-40 i-settings"></i></p>


<ul class="no-bullets">
    <li><i class="i i-fw i-bell"></i> Bell</li>
    <li><i class="i i-fw i-flag"></i> Flag</li>
    <li><i class="i i-fw i-traffic-cone"></i> Cone</li>
</ul>