Skip to content

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.

These plugins are designed for Tailwind CSS 3. Plugins for Tailwind CSS 4 are being developed.

Plugins

There are two plugin packages, developed by different developers:

Plugins use different syntax, have different options.

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

html<span class="iconify mdi-light--home"></span>
<span class="iconify-color vscode-icons--file-type-tailwind"></span>
Usage with @iconify/tailwind
html<span class="i-mdi-light-home"></span>
Usage with @egoist/tailwindcss-icons

Both packages also include plugins that can use dynamic selectors, which offer pretty much identical behavior:

html<span class="icon-[mdi-light--home]"></span>
Usage with @iconify/tailwind
html<span class="i-[mdi-light--home]"></span>
Usage with @egoist/tailwindcss-icons

Prefix for dynamic selectors can be configured in both plugins. The only real difference is the default configuration.

Installation

This documentation covers only @iconify/tailwind.

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

npm i -D @iconify/tailwind

Then 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(),
 ],
};

Icon sets

You also need to install icon sets as dev dependencies. You can install either full package @iconify/json or packages for icon sets, you want to use @iconify-json/{prefix}.

See icon data documentation.

For example, if you want to use icon mdi-light:home, install @iconify-json/mdi-light package.

Custom icon sets

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

Usage

For more details, see documentation for each plugin:

Released under the Apache 2.0 License.