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:
- @iconify/tailwind (multiple plugins in one package)
- @egoist/tailwindcss-icons
Plugins use different syntax, have different options.
For example, here is syntax to use
in HTML:<span class="iconify mdi-light--home"></span>
<span class="iconify-color vscode-icons--file-type-tailwind"></span>
<span class="i-mdi-light-home"></span>
Both packages also include plugins that can use dynamic selectors, which offer pretty much identical behavior:
<span class="icon-[mdi-light--home]"></span>
<span class="i-[mdi-light--home]"></span>
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:
const { 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:
const { 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}.
For example, if you want to use icon @iconify-json/mdi-light package.
, installCustom icon sets
Plugins also work with custom icon sets, see detailed documentation below.
Usage
For more details, see documentation for each plugin: