Icons utility for TailwindCSS
npm install @egoist/tailwindcss-icons💛 You can help the author become a full-time open-source maintainer by sponsoring him on GitHub.
---
> Use any icon from Iconify
 

``bash`
npm i @egoist/tailwindcss-icons -D
With TailwindCSS v4 css config:
`css
@plugin '@egoist/tailwindcss-icons';
/ pass options to the plugin /
@plugin '@egoist/tailwindcss-icons' {
scale: 1.5;
}
`
With js config:
`css`
@config "./tailwind.config.ts";
In your tailwind.config.ts:
`ts
import type { Config } from "tailwindcss"
import { iconsPlugin, getIconCollections } from "@egoist/tailwindcss-icons"
export default {
plugins: [
iconsPlugin({
// Select the icon collections you want to use
// You can also ignore this option to automatically discover all individual icon packages you have installed
// If you install @iconify/json, you should explicitly specify the collections you want to use, like this:
collections: getIconCollections(["mdi", "lucide"]),
// If you want to use all icons from @iconify/json, you can do this:
// collections: getIconCollections("all"),
// and the more recommended way is to use dynamicIconsPlugin, see below.`
}),
],
} satisfies Config
You also need to install @iconify/json (full icon collections, 50MB) or @iconify-json/{collection_name} (individual icon package):
`bashinstall every icon:
npm i @iconify/json -D
Then you can use the icons in your HTML:
`html
`Search the icon you want to use here: https://icones.js.org
> [!TIP]
> To get the full list of icon names as typescript type, you can refer to this issue.
$3
| Option | Type | Default | Description |
| -------------------- | --------------------------------- | ----------- | -------------------------------------------------------- |
| prefix | string |
i | Class prefix for matching icon rules |
| scale | number | 1 | Scale relative to the current font size |
| strokeWidth | number | undefined | Stroke width for icons (this may not work for all icons) |
| extraProperties | Record | {} | Extra CSS properties applied to the generated CSS. |
| collectionNamesAlias | [key in CollectionNames]?: string | {} | Alias to customize collection names. |$3
You can also use custom icons with this plugin, for example:
`ts
import type { Config } from "tailwindcss"
import { iconsPlugin } from "@egoist/tailwindcss-icons"export default {
plugins: [
iconsPlugin({
collections: {
foo: {
icons: {
"arrow-left": {
// svg body
body: ' ',
// svg width and height, optional
width: 24,
height: 24,
},
},
},
},
}),
],
} satisfies Config
`Then you can use this custom icon as class name:
i-foo-arrow-left.> [!TIP]
> To read custom icons from directory, you can refer to Load svgs from filesystem
$3
The idea is from @iconify/tailwind,
thanks to the author of Iconify for the great work!
If you want to install
@iconify/json and use whatever icon you want,
you should add another plugin to your tailwind.config.ts.This is because we can not provide autocomplete for all icons from
@iconify/json,
it will make your editor slow.`ts
import type { Config } from "tailwindcss"
import { iconsPlugin, dynamicIconsPlugin } from "@egoist/tailwindcss-icons"export default {
plugins: [iconsPlugin(), dynamicIconsPlugin()],
} satisfies Config
`Then you can use icons dynamically like
`.
MIT © EGOIST