Ora

How Do I Get Icons in Tailwind CSS?

Published in Tailwind CSS Icons 6 mins read

Integrating icons into your Tailwind CSS project is straightforward, with several excellent options available, including the highly recommended Hero Icons, designed by one of Tailwind's creators. By leveraging Tailwind's utility-first approach, you can easily style any icon set to match your design system.

The Recommended Solution: Hero Icons

For the most seamless experience, Hero Icons are the simplest and recommended icon set to use with Tailwind CSS. This collection was created by one of Tailwind CSS's creators, ensuring perfect harmony with the framework. The significant advantage is that these icons already have Tailwind CSS classes structured into their SVG markup or component definitions, allowing you to easily add them to your project, and they work right away with minimal effort.

How to Use Hero Icons

Hero Icons offers two main ways to integrate them into your project:

  1. Copy-Pasting SVG Code Directly:
    This is the most direct method and works with any HTML-based project, whether you're using a framework or not.

    • Visit the official Hero Icons website.
    • Browse and select the icon you need (available in "Outline" and "Solid" styles).
    • Click on the icon to copy its SVG code.
    • Paste the SVG directly into your HTML. You can then apply Tailwind CSS utility classes directly to the <svg> element to control its size, color, and more.

    Example:

    <div class="flex items-center space-x-2">
  <!-- Outline icon -->
  <svg class="h-6 w-6 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" d="M12 21v-8.25m0 0l-3-3m3 3l3-3M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>

  <!-- Solid icon -->
  <svg class="h-8 w-8 text-green-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path fill-rule="evenodd" d="M10.788 3.212c.44-.44 1.152-.44 1.592 0l3.58 3.58a.98.98 0 010 1.392.98.98 0 01-1.392 0L12 5.003 9.423 7.58a.98.98 0 01-1.392 0 .98.98 0 010-1.392l3.58-3.58zM4 12v3a5 5 0 005 5h6a5 5 0 005-5v-3H4z" clip-rule="evenodd" />
  </svg>
</div>
    • h-6 w-6 and h-8 w-8 control the size.
    • text-indigo-500 and text-green-500 set the color. For outline icons, Tailwind's stroke-current class (implicitly handled by currentColor) makes the stroke color match text-color. For solid icons, fill="currentColor" works similarly.

  2. Using with JavaScript Frameworks (e.g., React, Vue):
    Hero Icons provides dedicated packages for popular frameworks, making integration highly efficient.

    • Installation (React example):

      npm install @heroicons/react
# or
yarn add @heroicons/react

    • Usage:

      import { CloudArrowUpIcon, FireIcon } from '@heroicons/react/24/outline'; // For outline icons
import { Battery0Icon } from '@heroicons/react/24/solid'; // For solid icons

function MyComponent() {
  return (
    <div className="flex items-center space-x-3 p-4">
      <CloudArrowUpIcon className="h-7 w-7 text-blue-600" />
      <FireIcon className="h-8 w-8 text-red-700" />
      <Battery0Icon className="h-6 w-6 text-gray-400" />
    </div>
  );
}

    • Note that in JSX, class is replaced with className.

Other Popular Icon Libraries for Tailwind CSS

While Hero Icons are highly recommended, many other excellent icon libraries can be styled effectively with Tailwind CSS. The general approach involves either embedding SVG directly or using a font icon system, then applying Tailwind's utility classes for styling.

Integrating Font Awesome with Tailwind CSS

Font Awesome is one of the most popular icon sets, offering a vast collection of icons.

  • Via CDN (Simplest):
    Add the Font Awesome CDN link to your <head> tag in index.html:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  • Usage & Styling:
    You can then use <i> tags with Font Awesome classes, applying Tailwind classes alongside them.

    <div class="flex items-center space-x-4">
  <i class="fas fa-star text-yellow-500 text-3xl"></i>
  <i class="fas fa-bell text-blue-500 text-4xl"></i>
  <i class="fab fa-twitter text-sky-400 text-5xl"></i>
</div>
    • fas for solid icons, far for regular, fal for light, fad for duotone, fab for brand icons.
    • fa-star, fa-bell, fa-twitter specify the icon.
    • text-yellow-500, text-blue-500, text-sky-400 set the color.
    • text-3xl, text-4xl, text-5xl control the size using Tailwind's font size utilities.

    Explore more at Font Awesome.

Using Google Material Icons

Material Icons are another well-known set, characterized by their clean, modern, and consistent design.

  • Via CDN:
    Add the Material Icons CDN link to your <head> tag:

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  • Usage & Styling:
    Use a <span> tag with the material-icons class and the icon's literal name as the content.

    <div class="flex items-center space-x-4">
  <span class="material-icons text-red-500 text-2xl">favorite</span>
  <span class="material-icons text-purple-600 text-3xl">lightbulb</span>
  <span class="material-icons text-gray-700 text-4xl">settings</span>
</div>
    • material-icons is the base class.
    • favorite, lightbulb, settings are the icon names.
    • text-red-500, text-purple-600, text-gray-700 for color.
    • text-2xl, text-3xl, text-4xl for size.

    Find icons and documentation at Material Icons.

Lucide Icons

Lucide is a community-maintained fork of Feather Icons, offering a vast collection of SVG icons that are highly customizable and tree-shakable. They are designed for easy integration with modern web development workflows.

  • Usage & Styling:
    Similar to Hero Icons, you can copy the SVG directly or use framework-specific packages.

    <!-- Example of a Lucide icon as inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity h-10 w-10 text-orange-500">
  <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
</svg>
    • Tailwind classes like h-10 w-10 and text-orange-500 apply directly to the SVG.

    Discover icons at Lucide Icons.

Using Custom SVG Icons

For unique branding or specific design needs, you might want to use custom SVG icons. Tailwind CSS makes styling these just as easy as library icons.

  • How to Use:
    Export your SVG from a design tool (like Figma, Sketch, Adobe Illustrator) and paste the code directly into your HTML.

    <div class="flex items-center space-x-3">
  <svg class="h-12 w-12 text-blue-700 hover:text-blue-500 transition-colors duration-200" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <!-- Your custom SVG path data here -->
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 16c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/>
  </svg>
  <span class="text-xl font-semibold text-gray-800">My Custom Icon</span>
</div>
    • You have full control over viewBox, fill, stroke, etc., and can override or extend these with Tailwind's utility classes. Tailwind classes like h-12 w-12, text-blue-700, hover:text-blue-500 directly style the SVG.

Icon Library Comparison

To help you decide, here's a brief comparison of popular icon integration methods:

Feature Hero Icons Font Awesome Material Icons Custom SVGs
Integration Copy SVG / NPM packages CDN / NPM packages CDN Copy SVG directly into HTML
Tailwind Fit Excellent (designed for Tailwind) Good (via utility classes) Good (via utility classes) Excellent (full control)
Customization Stroke/Fill, Size, Color (CSS) Size, Color, Rotation, etc. (CSS/JS) Size, Color (CSS) Full control over paths, colors, animations
Performance Lightweight (SVG) Can be heavier (font icon, JS for SVG) Lightweight (font icon) Highly optimized if cleanly exported
Best For Modern UIs, Tailwind-first projects Broad icon needs, wide browser support Google-style interfaces, clear metaphors Unique branding, specific design requirements

Best Practices for Icon Usage

When working with icons in Tailwind CSS, consider these best practices:

  • Performance:
    • Prioritize SVG: Whenever possible, use inline SVGs or SVG sprite systems. They offer better scalability, crispness at any size, and are generally more performant than font icons (especially when heavily used).
    • Load What You Need: If using a library with many icons, ensure you're only loading the icons or icon subsets that your project actually uses to reduce bundle size.
  • Accessibility:
    • Context for Screen Readers: For decorative icons, use aria-hidden="true" to prevent screen readers from announcing them.
    • Descriptive Text: For meaningful icons that convey information, provide alternative text using title and desc elements within the SVG, or an aria-label attribute on the icon's container.
  • Consistency:
    • Maintain Style: Stick to one or two icon libraries to maintain a consistent visual style throughout your application. Mixing too many different icon sets can make your UI look disjointed.
    • Sizing and Color: Use Tailwind's utility classes consistently for icon sizing (e.g., h-5 w-5, text-xl) and coloring (e.g., text-gray-600, text-primary-500).
← Previous Article
What Is the Meaning of a Red Rose in Love?
Next Article →
Does Israel Have Pomegranates?