Skip to content

Customising icons in Iconify for Tailwind CSS

This documentation covers customise option for addIconSelectors 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:

   prefixes: ['tabler'],
   customise: (content, name, prefix) => {
       switch (prefix) {
           case 'tabler':
               return content.replaceAll('stroke-width="2"', 'stroke-width="1.5"');
       return content;


If you also have a customise option used in entry in prefixes option, that callback has a priority and main customise will not be used for that icon set.

Released under the Apache 2.0 License.