Using SVG Icons in Tailwind CSS (The Practical Guide)

Tailwind CSS and inline SVG icons are a near-perfect match: because Tailwind styles everything through utility classes and SVG icons inherit color and respond to CSS, you can size, recolor, and animate an icon entirely from the class attribute — no separate stylesheet, no @2x assets. The trick is knowing which utilities map to which SVG properties. This guide covers all of them with copy-paste examples.

Every icon on DownloadIcons ships as clean SVG using currentColor, which is exactly what makes the Tailwind patterns below work.

Size icons with width and height utilities

An inline SVG is sized like any element — set its width and height. The cleanest way in modern Tailwind is the size-* utility, which sets both at once:

<!-- 20px square icon -->
<svg class="size-5" ...>...</svg>

<!-- equivalent to -->
<svg class="w-5 h-5" ...>...</svg>

Tailwind’s spacing scale applies: size-4 is 16px, size-5 is 20px, size-6 is 24px. For icons that should scale with the surrounding text instead of a fixed pixel size, use w-[1em] h-[1em] (or size-[1em]) so the icon tracks the font size of its container.

Recolor with text utilities and currentColor

This is the part that makes Tailwind and SVG click. Because library icons use fill="currentColor" or stroke="currentColor", they inherit the CSS color property — and Tailwind’s text-* utilities set exactly that:

<svg class="size-6 text-blue-600" ...>...</svg>
<svg class="size-6 text-red-500" ...>...</svg>
<svg class="size-6 text-gray-400" ...>...</svg>

No fill-* class needed — text-blue-600 flows straight into currentColor. This is why you should always download icons that use currentColor rather than a hard-coded hex fill; every icon in our directory does. The same mechanism means an icon placed inside a button automatically matches the button’s text color with zero extra classes.

Hover, focus, and dark-mode states

Because the color is just a utility, every Tailwind state variant works on icons too:

<!-- gray by default, blue on hover -->
<svg class="size-6 text-gray-500 hover:text-blue-600 transition-colors" ...>

<!-- icon inside a button follows the button's hover state -->
<button class="text-gray-500 hover:text-gray-900">
  <svg class="size-5" ...>...</svg>
</button>

<!-- adapts to dark mode automatically -->
<svg class="size-6 text-gray-700 dark:text-gray-200" ...>

The group pattern is especially handy: put group on a parent and group-hover:text-* on the icon so the whole card lighting up an icon on hover takes one class. Wrapping the color in a transition-colors keeps state changes smooth.

Adjust stroke width on outline icons

Outline libraries draw with a stroke, and you can override its weight with Tailwind’s arbitrary-property syntax targeting the SVG stroke-width:

<!-- thinner, lighter stroke -->
<svg class="size-6 [stroke-width:1.5]" ...>...</svg>

<!-- heavier, bolder stroke -->
<svg class="size-6 [stroke-width:2.5]" ...>...</svg>

Keep one stroke weight across your whole UI so icons read as a family — mixing 1.5 and 2.5 makes a set look accidental. Outline sets like Lucide and Tabler are built on a uniform stroke, which is why they hold together so well; see the minimalist-line style for the look.

Which libraries pair best with Tailwind

If you’re on a Tailwind stack, Heroicons is nearly a zero-decision default — it’s built by the Tailwind team, so its line weights and rounding already match Tailwind’s typography defaults, and it ships outline, solid, and 20px mini variants for buttons, nav, and badges respectively.

Library	Why it fits Tailwind
Heroicons	Made by the Tailwind team; matching weights, three sizes
Lucide	Clean 24×24 outline, neutral, huge coverage
Phosphor	Six weights from one family for range
Tabler	Grid-precise; great in dense dashboards

Whichever you pick, you can preview color, size, and stroke right on the icon page before downloading. For a fuller comparison, see best free icon libraries for 2026.

Inline SVG vs. components in a Tailwind project

You can drop raw <svg> markup into your HTML and add classes directly — that’s the simplest path and what the examples above assume. In a React/Vue/Svelte project on Tailwind, the same classes go on the icon component instead:

<Search className="size-5 text-gray-500 hover:text-blue-600" />

The styling story is identical because the underlying element is still an SVG with currentColor. For the full breakdown of inline vs. components vs. sprites in a framework, see how to add icons to a React app.

A reusable icon button pattern

Combining sizing, color, states, and an accessible hit area, here’s a button pattern you can reuse across a Tailwind app:

<button
  type="button"
  aria-label="Search"
  class="inline-flex items-center justify-center size-11
         rounded-lg text-gray-500 hover:text-blue-600
         hover:bg-gray-100 dark:hover:bg-gray-800
         focus-visible:outline-2 focus-visible:outline-blue-600
         transition-colors">
  <svg class="size-5" aria-hidden="true" ...>...</svg>
</button>

The size-11 (44px) wrapper gives a comfortable tap target around a 20px glyph, aria-label names the control, and aria-hidden on the SVG keeps it from being announced twice. Those accessibility details aren’t optional — the full set of patterns is in the icon accessibility guide.

Frequently asked questions

Why isn’t text-blue-600 changing my icon’s color? The SVG probably has a hard-coded fill or stroke instead of currentColor. Download a version that uses currentColor (every icon in our directory does) or replace the hex value with currentColor.

Should I use fill-* or text-*? Use text-* for icons built on currentColor — it’s what currentColor resolves to. The fill-* utilities exist for cases where you must override a literal fill on a specific path.

How do I size an icon relative to text? Use size-[1em] so it scales with the parent’s font-size, which keeps icons proportional inside buttons and headings.

Can I animate icons with Tailwind? Yes — transition, animate-spin for loaders, and hover:/group-hover: variants all work. Respect users’ motion preferences with motion-reduce: variants.

The bottom line

Tailwind makes SVG icons effortless: size-* to scale, text-* to recolor through currentColor, state variants for hover and dark mode, and an arbitrary [stroke-width:…] for outline weight. Pair it with a library that matches your stack — Heroicons or Lucide are the safe defaults — and you’ll style every icon straight from the class attribute. Browse 21 libraries, customize, and download SVGs ready to drop into your Tailwind project.