How to use icons with Tailwind CSS
Tailwind doesn't ship icons, but it styles them beautifully. The trick is to author icons with fill="currentColor" so Tailwind's text-* colour utilities just work.
Size with width/height utilities
<svg class="w-5 h-5" fill="currentColor">…</svg>Color with text utilities
Because the icon uses currentColor, colour it exactly like text — and it changes on hover and in dark mode automatically:
<svg class="w-5 h-5 text-indigo-500 hover:text-pink-500" fill="currentColor">…</svg>Icons via CSS mask
Plugins like @iconify/tailwind let you drop any icon in as a background/mask utility, coloured with bg-* — handy for pseudo-elements and buttons.
Tip: for line icons use
stroke-current instead of fill-current.Frequently asked questions
How do I change icon color in Tailwind?
If the icon uses currentColor, apply a text-* class. Otherwise use fill-*/stroke-* utilities.
Does Tailwind include icons?
No, but it pairs with any icon set. The Iconify Tailwind plugin adds on-demand icons as utilities.