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.js:

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

/**
 * @type {import('tailwindcss-plugin-icons').Options}
 */
const options = ({ theme }) => ({
  heroiconsOutline: {
    icons: {
      lockOpen: {},
      lockClosed: {},
      plusCircle: {
        cursor: 'pointer',
        color: theme('colors.emerald.600'),
        '&:hover': {
          color: theme('colors.emerald.700')
        }
      },
      minusCircle: {
        cursor: 'pointer',
        color: theme('colors.red.600'),
        '&:hover': {
          color: theme('colors.red.700')
        },
        '.dark &': {
          color: theme('colors.red.400')
        }
      },
      'trash?bg': {}
    },
    scale: 1.5,
    location: 'https://esm.sh/@iconify-json/heroicons-outline@1.1.4/icons.json'
  }
})

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

Options gets forwarded all of 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 example).

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

<div class="i-heroicons-outline-plus-circle"></div>

Example