Styling SVG

Style inline SVG icons with fill and stroke utilities, using color inheritance to keep icons in sync with text.

4 min read Level 2/5 #tailwind#effects#svg

What you'll learn

Use fill-current and stroke-current
Set fill and stroke colors plus stroke width
Size icons with size-* and inherit color

Inline SVG icons are just elements, so Tailwind can style them — but they use fill and stroke rather than color and background.

fill and stroke

Outline-style icons (like Lucide or Heroicons outline) are drawn with stroke; solid icons use fill:

<svg class="size-5 fill-none stroke-current stroke-2">…</svg>   <!-- outline -->
<svg class="size-5 fill-current">…</svg>                        <!-- solid -->

size-5 sets width and height together — the most common way to size an icon.

currentColor Inheritance

The key pattern: fill-current and stroke-current make the icon inherit the text-* color of its context. Set the color on the parent and the icon follows automatically, including hover and dark mode:

<button class="text-gray-500 hover:text-blue-600">
  <svg class="size-5 fill-current">…</svg>
  Settings
</button>

The icon turns blue on hover because it inherits the button’s text color — no separate icon hover rule needed.

Explicit Colors

When an icon should not follow text color, set fill or stroke directly:

<svg class="size-6 fill-blue-500 stroke-gray-400 stroke-1">…</svg>

Pseudo-Classes & States →