Example of using custom icons?

[arafays]

is there a way to use a custom icon?

import { IconSet } from '@iconify/tools';

const iconSet = new IconSet({
    prefix: 'custom',
    icons: {
        my-custom-icon: {
            body: '<g fill="currentColor"><path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/></g>',
        },
    },
});

module.exports = {
    ....
    plugins: [
        iconsPlugin({
            collections: {
                ...getIconCollections(['mdi', 'lucide', 'twemoji']),
                wizard: iconSet,
            },
        })
    ],
}

[sardor01]

So, can we add custom icons?

[vernaillen]

It's working for me like this (without using new IconSet()):

const customIcons = {
  prefix: 'custom',
  icons: {
    'my-custom-icon': {
      body: '<g fill="currentColor"><path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/></g>',
      width: 14,
      height: 14
    }
  }
}

module.exports = {
    ....
    plugins: [
        iconsPlugin({
            collections: {
                custom: customIcons,
                ...getIconCollections(['mdi', 'lucide']),
            },
        })
    ],
}

[egoist]

just like @vernaillen 's example, I also just updated the readme: https://github.com/egoist/tailwindcss-icons#custom-icons