Episode 14 of 19

Icons

Add icons to your Tailwind CSS project using inline SVG, Heroicons, and Font Awesome. Learn sizing, coloring, and positioning icons with utilities.

Icons in Tailwind CSS

Tailwind does not ship with its own icon set, but it pairs beautifully with any icon library. The recommended approach is inline SVGs because Tailwind's color and sizing classes work directly on SVG elements.

Method 1 — Inline SVG

<svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>

Key utilities: w-6 h-6 sets size (24px), text-indigo-600 sets the currentColor, which SVGs inherit for stroke/fill.

Method 2 — Heroicons

Heroicons is the official icon set from the Tailwind CSS team—300+ icons in outline and solid styles.

Copy SVG from heroicons.com

<!-- Outline User -->
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"></path>
</svg>

<!-- Solid Heart -->
<svg class="w-6 h-6 text-red-500" fill="currentColor" viewBox="0 0 24 24">
  <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z"></path>
</svg>

Heroicons via npm (React)

npm install @heroicons/react
import { BeakerIcon } from '@heroicons/react/24/solid';
import { UserIcon } from '@heroicons/react/24/outline';

function App() {
  return (
    <div className="flex gap-4">
      <BeakerIcon className="w-6 h-6 text-indigo-600" />
      <UserIcon className="w-6 h-6 text-gray-600" />
    </div>
  );
}

Icon Sizes

ClassSizeUse Case
w-3 h-312pxBadges, inline small text
w-4 h-416pxButtons, body text
w-5 h-520pxStandard icon size
w-6 h-624pxNavigation, default
w-8 h-832pxFeature icons, cards
w-12 h-1248pxHero section icons

Icons in Buttons

<!-- Leading icon -->
<button class="inline-flex items-center gap-2 bg-indigo-600 text-white font-semibold py-2.5 px-5 rounded-lg hover:bg-indigo-700">
  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
  </svg>
  Add Item
</button>

<!-- Icon only (circular) -->
<button class="bg-indigo-600 text-white p-3 rounded-full hover:bg-indigo-700">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
  </svg>
</button>

Method 3 — Font Awesome

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<i class="fa-solid fa-house text-indigo-600 text-xl"></i>
<i class="fa-solid fa-heart text-red-500 text-2xl"></i>

Font Awesome icons size with text-* (font glyphs) while SVGs use w-*/h-*.

Feature Icons Grid

<div class="grid grid-cols-1 md:grid-cols-3 gap-8 p-8">
  <div class="text-center">
    <div class="bg-indigo-100 w-14 h-14 rounded-xl flex items-center justify-center mx-auto">
      <svg class="w-7 h-7 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
      </svg>
    </div>
    <h3 class="mt-4 font-bold text-gray-900">Lightning Fast</h3>
    <p class="mt-2 text-sm text-gray-500">Optimized builds under 10KB gzipped.</p>
  </div>
  <div class="text-center">
    <div class="bg-green-100 w-14 h-14 rounded-xl flex items-center justify-center mx-auto">
      <svg class="w-7 h-7 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
    </div>
    <h3 class="mt-4 font-bold text-gray-900">Reliable</h3>
    <p class="mt-2 text-sm text-gray-500">Tested across all modern browsers.</p>
  </div>
  <div class="text-center">
    <div class="bg-amber-100 w-14 h-14 rounded-xl flex items-center justify-center mx-auto">
      <svg class="w-7 h-7 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
      </svg>
    </div>
    <h3 class="mt-4 font-bold text-gray-900">Customizable</h3>
    <p class="mt-2 text-sm text-gray-500">Extend anything via config.</p>
  </div>
</div>

Recap

  • Inline SVG is the recommended approach — Tailwind utilities style SVGs directly.
  • Heroicons is the official icon set from the Tailwind team.
  • w-*/h-* control SVG size; text-* controls color via currentColor.
  • Use inline-flex items-center gap-2 to align icons with text.

Next, we will learn about hover effects and interactive states.

Web DevelopmentTailwind CSSCSSIconsSVG