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].
3. Configure the plugin in your tailwind.config file, for example, heroicons:

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

/**
 * @type {import('tailwindcss-plugin-icons').Options}
 */
const options = ({ theme }) => ({
  heroicons: {
    icons: {
      'plus-circle': {
        cursor: 'pointer',
        color: theme('colors.emerald.600'),
        '&:hover': {
          color: theme('colors.emerald.800')
        }
      },
      'trash?bg': {}
    },
    scale: 1.5,
    includeAll: true,
    location: 'https://esm.sh/@iconify-json/heroicons@1.1.6/icons.json'
  }
})

/**
 * @type {import('tailwindcss').Config}
 */
module.exports = {
  plugins: [Icons(options)]
}

The plugin's options is a function. It gets forwarded the Tailwind CSS plugin API and returns the selected icons with optional default style and scale. After the icon's name, you can pass ?bg or ?mask to force a specific render method (see also the comprehensive example).

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

<div class="i-heroicons-plus-circle"></div>
<div class="bg-heroicons-trash-black"></div>

Example