Skip to content

Customising icons in Iconify for Tailwind CSS

This documentation covers customise option for addDynamicIconSelectors plugin.

Customise callback

Option customise allows you to change content of icons.

What is it for?

  • You can change stroke-width in icons that use stroke.
  • You can change colors in icons that use hardcoded palette, such as emojis.
  • You can change animation duration in animated icons.
  • You can change opacity of semi-transparent elements.
  • You can add extra shapes to icons.

...and so on. You have full control over SVG content.


customise option is a function, which has 3 parameters:

  • content, string. Icon content.
  • name, string. Icon name.
  • prefix, string. Icon set prefix.

Function should return modified content. If there is nothing to modify, it should return original content value.


Example of using customise option to change stroke-width in Tabler icons:

   // Change prefix
   // Thin icons will be used as <span class="icon-thin-[tabler--app-window]"></span>
   // and <span class="icon-[tabler--app-window]"></span> will still have default 2px stroke
   prefix: 'icon-thin',
   // Customise content
   customise: (content, name, prefix) => {
       switch (prefix) {
           case 'tabler':
               return content.replaceAll('stroke-width="2"', 'stroke-width="1"');
       return content;

Released under the Apache 2.0 License.