Skip to content

docs: update Iconify Tailwind configuration to use dynamic selectors … #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
navidshad merged 1 commit into from
Apr 11, 2026
Merged

docs: update Iconify Tailwind configuration to use dynamic selectors … #80

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions src/icon/alternativeIconsPacks.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ To get started with Iconify in a Tailwind CSS project, follow these steps:
Add the official plugin and any icon sets you want to use as development dependencies. For example, to use Material Design Icons (light theme) you can run: `npm install -D @iconify/tailwind @iconify-json/mdi-light`.

#### 2. **Configure Tailwind to use the Iconify plugin:**
Open your tailwind.config.js and import the plugin. Then add it to the plugins array, specifying which icon sets (by their prefix) to include if using the static selectors. For example:
Open your tailwind.config.js and import the plugin. Then add it to the plugins array. For example:

```javascript
// tailwind.config.js
Expand All @@ -45,14 +45,14 @@ After setup, you can use Iconify icons in your Vue components just like using an

```vue
<template>
<!-- Using the 'home' icon from Material Design Icons (mdi-light set) -->
<span class="icon-[mdi-light--home] text-gray-600 w-6 h-6"></span>
<icon name="icon-[mdi-light--home]" />
<Button iconName="icon-[mdi-light--home]" />
<IconButton iconName="icon-[mdi-light--home]" />
<!-- Using the 'hand-stop' icon from Tabler Icons (tabler set) -->
<span class="iconify tabler--hand-stop text-gray-600 w-6 h-6"></span>
<Icon name="iconify tabler--hand-stop" />
<Button iconName="iconify tabler--hand-stop" />
<IconButton iconName="iconify tabler--hand-stop" />
</template>
```

In the snippet above, the icon-[mdi-light--home] class inserts the mdi-light:home icon as an inline SVG. We also apply Tailwind utility classes for color and size. In this example, text-gray-600 sets the icon color (monotone icons inherit the text color), and w-6 h-6 gives it a fixed width and height. You can swap out the prefix and icon name to use any icon from Iconify’s library (just make sure you’ve installed the corresponding icon set).
In the snippet above, the iconify tabler--hand-stop class inserts the tabler:hand-stop icon. We also apply Tailwind utility classes for color and size. In this example, text-gray-600 sets the icon color (monotone icons inherit the text color), and w-6 h-6 gives it a fixed width and height. You can swap out the prefix and icon name to use any icon from Iconify’s library (just make sure you’ve installed the corresponding icon set).

For more details on using Iconify with Tailwind (and other setup options like additional icon sets or dynamic mode), refer to the official Iconify Tailwind CSS documentation.
Loading