Iconify for Tailwind CSS

Iconify plugin for Tailwind CSS makes it easy to use icons in Tailwind CSS.

You can use over 200,000 open source icons and custom icons with minimal code.

Tailwind CSS version

This documentation covers plugins for Tailwind 3.

For a newer Tailwind 4 plugin, see Tailwind 4 plugin documentation.

However, Tailwind 3 plugins can be used with Tailwind 4 too, but you need to create a configuration file.

Plugins

There are several plugins available, they use different syntax, have different options.

There are 2 main plugins:

• addDynamicIconSelectors()
• addIconSelectors()

Plugins use different syntax, have different options.

For example, here is syntax to use icon mdi-light:home in HTML:

html<span class="icon-[mdi-light--home]"></span>

Usage with addDynamicIconSelectors

html<span class="icon-[mdi-light--home]"></span>

Usage with addIconSelectors

Installation

To install plugins, add @iconify/tailwind as dev dependency:

npm i -D @iconify/tailwind

Then you need to configure it.

Tailwind 3 configuration

For Tailwind CSS 3, open tailwind.config.js, import addIconSelectors (main plugin) or addDynamicIconSelectors (dynamic selectors) from @iconify/tailwind and add it to a list of plugins.

Example tailwind.config.js with addIconSelectors() plugin:

jsconst { addIconSelectors } = require("@iconify/tailwind");

/** @type {import('tailwindcss').Config} */
module.exports = {
 content: ["./src/*.html"],
 plugins: [
   // Iconify plugin for clean selectors, requires writing a list of icon sets to load
   // Icons usage in HTML:
   //  <span class="iconify mdi-light--home"></span>
   //  <span class="iconify-color vscode-icons--file-type-tailwind"></span>
   addIconSelectors(["mdi-light", "vscode-icons"]),
 ],
};

Example tailwind.config.js with addDynamicIconSelectors() plugin:

jsconst { addDynamicIconSelectors } = require("@iconify/tailwind");

/** @type {import('tailwindcss').Config} */
module.exports = {
 content: ["./src/*.html"],
 plugins: [
   // Iconify plugin for dynamic selectors, configuration is not required
   // Icons usage in HTML:
   //  <span class="i-[mdi-light--home]"></span>
   addDynamicIconSelectors(),
 ],
};

Tailwind 4 config

For Tailwind 4, you need to create a new file, for example, icons.mjs with configuration:

jsimport { addDynamicIconSelectors } from "@iconify/tailwind";

export default addDynamicIconSelectors();

Then in your CSS file import that plugin:

css@plugin './icons.mjs';

All code samples in documentation are for Tailwind CSS 3.

Tailwind CSS 4 configuration is similar, except that instead of adding plugin to plugins property of Tailwind configuration, you need to export it as a default export.

This requires basic understanding of how modules and exports work.

Icon sets

Plugin does not include icons. You need to add icon sets you want to use.

To add all open source icon sets, add @iconify/json as dev dependency:

npm i -D @iconify/json

You can also install only icon sets that you want to use by installing @iconify-json/{prefix} dependencies (where "{prefix}" is icon set prefix), such as @iconify-json/mdi-light.

See icon data documentation.

Custom icon sets

Plugins also work with custom icon sets, see detailed documentation below.

Usage

For more details, see documentation for each plugin:

• addIconSelectors() plugin documentation.
• addDynamicIconSelectors() plugin documentation.