Tabler

Tabler outline icons

The minified tabler-sprite-outline.svg file is already included here: public/assets/svg, allowing you to use any of the Tabler stroke icons. To add an icon, simply reference its name from the icon list.

To add a new Tabler outline icon, refer to the icon list and get the icon name.

Use the format tabler-[iconname] in your code. Here's an example:

src/blocks/pricing/Pricing5.tsx

// import common components
import SvgIcon from '@/components/SvgIcon';

<SvgIcon
    name="tabler-check" // Make sure this name available in tabler outline icon
    type={IconType.STROKE} // It is the default set so no need to add this for this icon
    size={16} // Change icon size
    color="text.secondary" // Change icon color
    stroke={2} // Change icon stroke width
/>

Tabler fill icons

We have created a separate file, tabler-sprite-fill.svg , located in the public/assets/svg path.

Only the usable fill SVG icons are included in this file at this moment.

How can I add new fill icons?

1. To add a new fill icon, copy the SVG code from the icon list.

   <!-- Copy svg code -->
   <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-star">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
     <path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z" />
   </svg>

2. Include the above code in the tabler-sprite-fill.svg file. between the SVG tag

3. Customize as per other icons already added

   1. Replace SVG with symbol tag

   2. Remove width & height attributes

   3. Also, remove the class & add id attributes with a specific name, here is an example: Remove: class="icon icon-tabler icons-tabler-filled icon-tabler-star" Add: id="tabler-filled-star"

   tabler-sprite-fill.svg file

   <!-- Customize final code -->
   <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" id="tabler-filled-star">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
     <path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z" />
   </symbol>  
   
   
   
   

4. After adding a new svg then use this svg id in your files

   Icon.tsx file (example)

   // import common components
   import SvgIcon from '@/components/SvgIcon';
   
   <SvgIcon
       name="tabler-filled-star" // Add id which is added in tabler-sprite-fill.svg
       type={IconType.FILL} // Change icon type for fill icon
       size={16} // Change icon size
       color="text.secondary" // Change icon color
   />

5. The icon has been successfully added! 👍