Heroicons (Solid)

Overview

The solid variant of Heroicons, featuring filled shapes for a bolder, more prominent appearance. Created by the Tailwind CSS team, solid Heroicons are perfect for navigation indicators, active states, and interactive elements where you need clear visual feedback. They maintain the same clean aesthetic as Heroicons Outline.

Key Features

• Solid filled style for strong visual weight
• Same icons as Heroicons Outline
• Made by the Tailwind CSS team
• TypeScript support
• Ideal for active navigation states
• Seamless pairing with Tailwind CSS

Installation

npm install @heroicons/react

Usage Example

Basic React usage with Heroicons (Solid)

import { HomeIcon, MagnifyingGlassIcon } from '@heroicons/react/24/solid';

export default function NavItem({ isActive }: { isActive: boolean }) {
  // Mix outline and solid based on state
  const Icon = isActive
    ? HomeIcon  // from /24/solid
    : HomeIcon; // swap with outline variant when needed

  return (
    <Icon className="w-6 h-6 text-indigo-600" />
  );
}

Best For