GitHub
  1. Icon Monks
  2. Guides
  3. Tailwind CSS

How to use icons with Tailwind CSS

Icon Monks icons draw in currentColor and accept a className, so Tailwind utilities style them like text. Use size-* or w-* h-* for size and text-* for color, and every Tailwind state, including hover:, group-hover: and dark:, just works.

React and Vue

// React
<Heart className="size-6 text-rose-600 hover:text-rose-700 dark:text-rose-400" weight="fill" />

<!-- Vue -->
<Heart class="size-6 text-rose-600" weight="fill" />

Class sizes win over the default 1em size, because CSS outranks the SVG width and height attributes. Leave out the color prop so the text-* class decides the color.

Plain HTML and the web component

<!-- web component: size and color follow the element's font size and text color -->
<icon-monks name="heart" class="text-2xl text-rose-600"></icon-monks>

<!-- icon font -->
<i class="im im-heart text-2xl text-rose-600"></i>

Without a size attribute the web component is 1em tall, so text-xl, text-2xl and so on set its size, just like the icon font.

Icons inside buttons

<button class="group inline-flex items-center gap-2 rounded-lg px-4 py-2 text-slate-700 hover:bg-slate-100">
  <Gear aria-hidden="true" className="size-5 text-slate-500 group-hover:text-slate-900" />
  Settings
</button>

Use gap-* on a flex parent for the space between icon and label, and group-hover: to change the icon color when the whole button is hovered. Match the icon size to the text: size-4 with text-sm, size-5 with text-base.

Duotone with Tailwind

The duotone weight paints its tint at 20% opacity of the same color, so a single text-* class colors both layers. No extra classes are needed.

Frequently asked questions

Do I need a Tailwind plugin for Icon Monks?

No. The icons use currentColor and accept a class, so the utilities you already have are enough.

Why is my icon the wrong size with Tailwind?

Check that you are not also passing a size prop or attribute that a later style overrides, and that the icon is not inside a flex row that shrinks it. Add shrink-0 if it does.

Can I use Icon Monks with Tailwind in Next.js or Nuxt?

Yes. Install the React or Vue package and add classes as shown above. See the Next.js guide for Server Component setup.

More guides

Written by Atiqur Rahaman, Founder & CEO, Design Monks & Dev Monks at Design Monks. About Icon Monks

Last updated with version 0.4.3. Release notes