tailwindcss-iconify

Tailwind CSS plugin for Iconify.

Bring @unocss/preset-icon to Tailwind CSS, based on antfu's post Icons in pure css

Why

No need to install additional Icon libraries
Only used icons are included, thanks to Tailwind Purge
Easy to switch icons with CSS: i-[carbon-star] hover:i-[carbon-star-filled]

Demo

https://tailwindcss-iconify.vercel.app

Installation

Install this plugin

# 1. install plugin
yarn add -D tailwindcss-iconify
# 2. install your needed iconset
yarn add -D @iconify-json/carbon
#    [Optional] install all the icons (about 130MB)
yarn add -D @iconify/json

Add this plugin to your tailwind.config.js:

module.exports = {
  ...
  plugins: [require('tailwindcss-iconify').default()],
  ...
}

Usage

<div className="i-[carbon-star] hover:i-[carbon-star-filled]" />

If are using VSCode, and want to get a better Development Experience, you can install the Iconify IntelliSense VSCode Plugin.

TODO

Support more configurations, like custom properties
Support custom icon sets

Thanks

This project is greatly inspired by @unocss/preset-icon. If you want to get the fully supported iconify support in css, you can try unocss , it's a fast and small Atomic-CSS generator alternative.