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.

Plugins

There are two plugin packages, developed by different developers:

• @iconify/tailwind (multiple plugins in one package)
• @egoist/tailwindcss-icons

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.

Documentation

This documentation covers only @iconify/tailwind.

For @egoist/tailwindcss-icons documentation see its repository on GitHub.

Installation

You need to install and configure plugin.

To install it, 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:

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

/** @type {import('tailwindcss').Config} */
module.exports = {
   content: ['./src/*.html'],
   plugins: [
       // Iconify plugin, requires writing list of icon sets to load
       addIconSelectors(['mdi', 'mdi-light']),
   ],
};

Example tailwind.config.js with dynamic selectors:

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

/** @type {import('tailwindcss').Config} */
module.exports = {
   content: ['./src/*.html'],
   plugins: [
       // Iconify plugin
       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.

Usage

For more details, see documentation for each plugin:

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