Use Iconify with TailwindCSS

To use Iconify icons in TailwindCSS, you first need to install a TailwindCSS plugin. There are currently two well-implemented options:

• @iconify/tailwind
• @egoist/tailwindcss-icons

The first one is Iconify's official plugin. The two plugins differ internally but have very similar usage and effects. Pick whichever you prefer. Of course, the premise is that your project has TailwindCSS installed.

Using @iconify/tailwind

First, install the 200k+ icon dataset (@iconify/json) and the @iconify/tailwind plugin:

npm install @iconify/json @iconify/tailwind --save-dev

Then declare the plugin in tailwind.config.js:

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

module.exports = {
  plugins: [addDynamicIconSelectors()]
}

That's it! You can now import icons using class names anywhere.

To add a left arrow icon for example:

<i class="icon-[material-symbols--arrow-back-ios-new]"></i>

The bracketed text is the {collection}--{icon_name}. You likely won't remember the names for every collection and icon. This is where Yesicon comes in handy. Just search for the icon you want, copy the code, and paste it into your project.

Using @egoist/tailwindcss-icons

Similarly, first install the icon dataset and @egoist/tailwindcss-icons plugin:

npm install @iconify/json @egoist/tailwindcss-icons --save-dev

Then declare the plugins in tailwind.config.js:

const { iconsPlugin, dynamicIconsPlugin } = require('@egoist/tailwindcss-icons')

module.exports = {
  plugins: [iconsPlugin(), dynamicIconsPlugin()]
}

You can now use icon class names in any file. Note the different plugin syntax:

<i class="icon-material-symbols-arrow-back-ios-new"></i>

Performance note: The above imports all icons for simplicity. But since @egoist/tailwindcss-icons has editor autocompletion, this can slow things down. For optimal performance, the author recommends on-demand icon loading. See the plugin docs for details.

Icon Color and Size

Set an icon's color and size using the text color and font size on the element or parent element:

<i class="icon-[material-symbols--arrow-back-ios-new] text-rose-500 text-2xl"></i>

For example, this makes the left arrow icon rose colored at 24px.