Heroicons

npm install @heroicons/react

// app/components/heroicon-demo.tsx
"use client";
 
import { MagnifyingGlassIcon, Cog6ToothIcon } from "@heroicons/react/24/outline";
import { HomeIcon, BellIcon } from "@heroicons/react/24/solid";
import { ChevronDownIcon } from "@heroicons/react/20/solid";
 
export function HeroiconDemo() {
  return (
    <div className="flex items-center gap-4">
      <MagnifyingGlassIcon className="h-6 w-6 text-gray-500" />
      <Cog6ToothIcon className="h-6 w-6 text-gray-500" />
      <HomeIcon className="h-6 w-6 text-blue-600" />
      <BellIcon className="h-6 w-6 text-yellow-500" />
      <ChevronDownIcon className="h-5 w-5 text-gray-400" />
    </div>
  );
}

// app/components/nav-bar.tsx
"use client";
 
import { usePathname } from "next/navigation";
import Link from "next/link";
import {
  HomeIcon as HomeOutline,
  MagnifyingGlassIcon as SearchOutline,
  BellIcon as BellOutline,
  UserIcon as UserOutline,
} from "@heroicons/react/24/outline";
import {
  HomeIcon as HomeSolid,
  MagnifyingGlassIcon as SearchSolid,
  BellIcon as BellSolid,
  UserIcon as UserSolid,
} from "@heroicons/react/24/solid";
 
interface NavLink {
  href: string;
  label: string;
  outlineIcon: React.ElementType;
  solidIcon: React.ElementType;
}
 
const navLinks: NavLink[] = [
  { href: "/", label: "Home", outlineIcon: HomeOutline, solidIcon: HomeSolid },
  { href: "/search", label: "Search", outlineIcon: SearchOutline, solidIcon: SearchSolid },
  { href: "/notifications", label: "Notifications", outlineIcon: BellOutline, solidIcon: BellSolid },
  { href: "/profile", label: "Profile", outlineIcon: UserOutline, solidIcon: UserSolid },
];
 
export function NavBar() {
  const pathname = usePathname();
 
  return (
    <nav className="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white">
      <div className="mx-auto flex max-w-md items-center justify-around py-2">
        {navLinks.map(({ href, label, outlineIcon: OutlineIcon, solidIcon: SolidIcon }) => {
          const isActive = pathname === href;
          const Icon = isActive ? SolidIcon : OutlineIcon;
 
          return (
            <Link
              key={href}
              href={href}
              aria-label={label}
              aria-current={isActive ? "page" : undefined}
              className={`flex flex-col items-center gap-1 px-3 py-1 ${
                isActive ? "text-blue-600" : "text-gray-500 hover:text-gray-700"
              }`}
            >
              <Icon className="h-6 w-6" />
              <span className="text-xs">{label}</span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}

import { PlusIcon } from "@heroicons/react/20/solid";
 
export function AddButton() {
  return (
    <button className="inline-flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700">
      <PlusIcon className="h-5 w-5" />
      Add Item
    </button>
  );
}

import { ArrowPathIcon } from "@heroicons/react/24/outline";
 
export function RefreshButton({ isLoading }: { isLoading: boolean }) {
  return (
    <button aria-label="Refresh" className="p-2">
      <ArrowPathIcon
        className={`h-5 w-5 text-gray-600 ${isLoading ? "animate-spin" : ""}`}
      />
    </button>
  );
}

type HeroIcon = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 
interface MenuItem {
  icon: HeroIcon;
  label: string;
}