Awesome
tailwindcss-plugin-icons
Tailwind CSS implementation of @unocss/preset-icons. See comprehensive example at playground/vue.
npm install tailwindcss-plugin-icons
pnpm add tailwindcss-plugin-icons
yarn add tailwindcss-plugin-icons
How to Use
-
Search the available icon sets at Icônes or Iconify and choose the icons your project needs.
-
Install any required icon set with
npm install @iconify-json/[the-icon-set-name]
. -
Configure the plugin in your
tailwind.config
file, for example, heroicons:import type { Config } from 'tailwindcss' import { Icons, type Options } from 'tailwindcss-plugin-icons' const options: Options = ({ theme }) => ({ heroicons: { icons: { 'plus-circle': { cursor: 'pointer', color: theme('colors.emerald.600'), '&:hover': { color: theme('colors.emerald.800'), }, }, 'trash?bg': {}, }, includeAll: true, scale: iconName => (iconName.endsWith('-20-solid') ? 1.25 : 1.5), location: 'https://esm.sh/@iconify-json/heroicons@1.1.9/icons.json', }, }) export default { plugins: [Icons(options)], } as Config
The plugin's
options
are 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. Finally, you can useincludeAll: true
to have every icon in the icon set added as a Tailwind source. -
Write icons with Tailwind CSS classes directly in your markup:
<div class="i-heroicons-plus-circle"></div> <div class="bg-heroicons-trash-black"></div>