💛 You can help the author become a full-time open-source maintainer by sponsoring him on GitHub.

---

@egoist/tailwindcss-icons

Use any icon from Iconify

Install

1npm i @egoist/tailwindcss-icons -D

Usage

[!NOTE] You still need JS configuration file to use this plugin with Tailwind CSS v4, refer to this guide.

In your tailwind.config.js:

1const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons")
2
3module.exports = {
4  plugins: [
5    iconsPlugin({
6      // Select the icon collections you want to use
7      // You can also ignore this option to automatically discover all individual icon packages you have installed
8      // If you install @iconify/json, you should explicitly specify the collections you want to use, like this:
9      collections: getIconCollections(["mdi", "lucide"]),
10      // If you want to use all icons from @iconify/json, you can do this:
11      // collections: getIconCollections("all"),
12      // and the more recommended way is to use `dynamicIconsPlugin`, see below.
13    }),
14  ],
15}

You also need to install @iconify/json (full icon collections, 50MB) or @iconify-json/{collection_name} (individual icon package):

1# install every icon:
2npm i @iconify/json -D
3
4# or install individual packages like this:
5npm i @iconify-json/mdi @iconify-json/lucide -D

Then you can use the icons in your HTML:

1<!-- pattern: i-{collection_name}-{icon_name} -->
2<span class="i-mdi-home"></span>

Search the icon you want to use here: https://icones.js.org

[!TIP] To get the full list of icon names as typescript type, you can refer to this issue.

Plugin Options

Option	Type	Default	Description
prefix	string	i	Class prefix for matching icon rules
scale	number	1	Scale relative to the current font size
strokeWidth	number	undefined	Stroke width for icons (this may not work for all icons)
extraProperties	Record<string, string>	{}	Extra CSS properties applied to the generated CSS.
collectionNamesAlias	[key in CollectionNames]?: string	{}	Alias to customize collection names.

Custom Icons

You can also use custom icons with this plugin, for example:

1module.exports = {
2  plugins: [
3    iconsPlugin({
4      collections: {
5        foo: {
6          icons: {
7            "arrow-left": {
8              // svg body
9              body: '<path d="M10 19l-7-7m0 0l7-7m-7 7h18"/>',
10              // svg width and height, optional
11              width: 24,
12              height: 24,
13            },
14          },
15        },
16      },
17    }),
18  ],
19}

Then you can use this custom icon as class name: i-foo-arrow-left.

[!TIP] To read custom icons from directory, you can refer to Load svgs from filesystem

Generate Icon Dynamically

The idea is from @iconify/tailwind, thanks to the author of Iconify for the great work!

If you want to install @iconify/json and use whatever icon you want, you should add another plugin to your tailwind.config.js.

This is because we can not provide autocomplete for all icons from @iconify/json, it will make your editor slow.

1const { iconsPlugin, dynamicIconsPlugin } = require("@egoist/tailwindcss-icons")
2
3module.exports = {
4  plugins: [iconsPlugin(), dynamicIconsPlugin()],
5}

Then you can use icons dynamically like <span class="i-[mdi-light--home]"></span>.

Sponsors

License

MIT © EGOIST