tailwindcss-plugin-icons

tailwindcss-plugin-icons

Tailwind CSS port of @unocss/preset-icons.

# Npm
npm install tailwindcss-plugin-icons
# Pnpm
pnpm add tailwindcss-plugin-icons
# Yarn
yarn add tailwindcss-plugin-icons

How to use

1. Search the available icon sets at Icônes or Iconify and choose the icons your project needs
2. Install the icon sets with npm install @iconify-json/[the-collection-you-want]. For example heroicons npm install @iconify-json/heroicons-outline @iconify-json/heroicons-solid
3. Configure the plugin in your tailwind.config.js:

const { Icons } = require('tailwindcss-plugin-icons')

module.exports = {
  [...]
  plugins: [
    Icons({
      // With existing icon sets
      asMask: {
        heroiconsSolid: ['trash', 'dots-vertical'],
        heroiconsOutline: ['trash', 'dots-vertical'],
      },
      asBackground: {
        heroiconsSolid: ['trash']
      },
      // Pass a custom icon set
      custom: {
        asMask: ['loading'],
        location: './src/icons.json'
      }
    })
  ]
}

1. Write icons with Tailwind CSS classes directly in your markup:

<div class="i-heroicons-solid-trash w-5 h-5"></div>

Example