💛 You can help the author become a full-time open-source maintainer by sponsoring him on GitHub.

---

@egoist/tailwindcss-icons

> Use any icon from Iconify

 

Install

``bash
npm i @egoist/tailwindcss-icons -D
`

Usage

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):

`bash


install every icon:

npm i @iconify/json -D

or install individual packages like this:

npm i @iconify-json/mdi @iconify-json/lucide -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 `.

Sponsors


License

MIT © EGOIST