SVG Icons with Tailwind CSS – currentColor, Dark Mode & Best Libraries

Tailwind CSS and SVG icons pair naturally through currentColor — your icon inherits any text color class you apply. Here’s how to get clean, scalable icons with Tailwind.

Best icon libraries for Tailwind CSS

HomeUserCog 6 ToothHomeUserSettingsHomeUserSettingsHouseUserGearHome LineUser LineSettings Line

Heroicons is built by the Tailwind team and uses the exact same sizing scale. Lucide is the second most popular choice for Tailwind projects.

Color via currentColor

Stroked SVG icons (Lucide, Heroicons, Tabler) use currentColor by default, so they inherit Tailwind text color classes:

<!-- Tailwind text color classes control the icon color -->
<svg class="h-5 w-5 text-indigo-600" ...>...</svg>

<!-- Dark mode variant -->
<svg class="h-5 w-5 text-gray-800 dark:text-gray-200" ...>...</svg>

<!-- Hover color -->
<svg class="h-5 w-5 text-gray-500 hover:text-gray-900 transition-colors" ...>...</svg>

Sizing with h-* and w-* classes

Tailwind’s spacing scale maps directly to icon sizes:

<svg class="h-5 w-5" ...>...</svg>    <!-- inline, 20px -->
<svg class="h-6 w-6" ...>...</svg>    <!-- standard, 24px -->

Heroicons with Tailwind

Heroicons was designed for Tailwind — it ships two variant sets matching Tailwind’s design language:

import {
  HomeIcon,           // outline variant (24px)
  BellIcon,
  Cog6ToothIcon,
} from '@heroicons/react/24/outline';

import {
  HomeIcon as HomeSolid,  // solid variant
} from '@heroicons/react/24/solid';

// 20px mini variant (matches Tailwind's text-sm ui density)
import { HomeIcon as HomeMini } from '@heroicons/react/20/solid';

export function Nav() {
  return (
    <nav className="flex items-center gap-3">
      <HomeIcon className="h-5 w-5 text-gray-600" />
      <BellIcon className="h-5 w-5 text-gray-600 hover:text-indigo-600 transition" />
    </nav>
  );
}

Lucide React with Tailwind

import { Home, Bell, Settings } from 'lucide-react';

// Use className for color, size prop or h-/w- classes for size
<Home className="h-5 w-5 text-gray-700 dark:text-gray-300" />

// strokeWidth for thinner or bolder strokes
<Home className="h-5 w-5" strokeWidth={1.5} />
<Home className="h-5 w-5" strokeWidth={2.5} />

Dark mode icons

<!-- Light: gray-700, Dark: gray-300 -->
<svg class="h-5 w-5 text-gray-700 dark:text-gray-300" ...>...</svg>

<!-- Light: indigo-600, Dark: indigo-400 -->
<svg class="h-5 w-5 text-indigo-600 dark:text-indigo-400" ...>...</svg>

Filled icons vs stroked icons

Filled icons (like Heroicons solid) use fill="currentColor" — not stroke. The rules are the same: control color via Tailwind text-* classes.

<!-- Stroked icon -->
<svg stroke="currentColor" fill="none" class="h-5 w-5 text-gray-600" ...>...</svg>

<!-- Filled icon -->
<svg fill="currentColor" stroke="none" class="h-5 w-5 text-indigo-600" ...>...</svg>

Icon button with Tailwind

<button
  className="inline-flex items-center justify-center h-9 w-9 rounded-md
    text-gray-500 hover:bg-gray-100 hover:text-gray-900
    dark:hover:bg-gray-800 dark:hover:text-gray-100
    transition-colors"
  aria-label="Settings"
>
  <Settings className="h-4 w-4" aria-hidden="true" />
</button>

Tailwind plugin: @tailwindcss/forms icons

The Tailwind forms plugin uses background-image SVG for checkboxes and radios — those are different from component icons. For UI component icons, use an icon library component, not a background image.

Inline SVG approach (no package)

Copy from AllSVGIcons and paste directly — add Tailwind classes on the <svg> element:

<svg
  xmlns="http://www.w3.org/2000/svg"
  class="h-5 w-5 text-gray-600 hover:text-indigo-600 transition-colors"
  fill="none"
  viewBox="0 0 24 24"
  stroke="currentColor"
  stroke-width="2"
  aria-hidden="true"
>
  <path stroke-linecap="round" stroke-linejoin="round"
    d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" />
</svg>

Frequently asked questions