React SVG Icons – Best Free Libraries & How to Use Them

React has a rich ecosystem of SVG icon libraries. Here’s how to pick one and use it — from copy-paste SVG to tree-shakeable React components.

Recommended icon libraries for React

HomeUserSettingsHomeUserCog 6 ToothHouseUserGearHomeUserSettingsHome LineUser LineSettings Line

Install a React icon library

# Lucide (most popular, MIT)
npm install lucide-react

# Heroicons (Tailwind team, MIT)
npm install @heroicons/react

# Phosphor (6 weights, MIT)
npm install @phosphor-icons/react

Import and render an icon

// lucide-react — named exports per icon
import { Search, Bell, Settings } from 'lucide-react';

export function Nav() {
  return (
    <nav className="flex items-center gap-4">
      <Search size={20} strokeWidth={1.5} />
      <Bell size={20} />
      <Settings size={20} />
    </nav>
  );
}

// heroicons — outline or solid variant paths
import { MagnifyingGlassIcon, BellIcon } from '@heroicons/react/24/outline';

export function Nav() {
  return (
    <nav className="flex items-center gap-4">
      <MagnifyingGlassIcon className="h-5 w-5" />
      <BellIcon className="h-5 w-5" />
    </nav>
  );
}

Control size and color

// Lucide — size and strokeWidth props
<Search size={16} />   {/* 16px */}
<Search size={24} />   {/* 24px */}
<Search size={32} />   {/* 32px */}

// Color via Tailwind className (both libraries)
<Search className="text-primary" size={20} />
<Search className="text-red-500 hover:text-red-700" size={20} />

// Color via style prop
<Search size={20} style={{ color: '#6366f1' }} />

Icons in buttons

// Icon-only button — label on button
<button aria-label="Search">
  <Search size={20} aria-hidden="true" />
</button>

// Button with icon and text
<button className="inline-flex items-center gap-2">
  <Download size={16} aria-hidden="true" />
  Download SVG
</button>

Use SVG directly (no install needed)

For one-off icons or static sites, copy an SVG from AllSVGIcons and paste it inline:

// Paste SVG inline — no package needed
function SearchIcon({ size = 20 }: { size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <circle cx="11" cy="11" r="8" />
      <path d="m21 21-4.3-4.3" />
    </svg>
  );
}

Server Components (App Router)

Lucide, Heroicons, Tabler, and Phosphor all work in React Server Components — they export pure SVG elements with no client-side state:

// app/page.tsx — Server Component, no 'use client' directive needed
import { Search } from 'lucide-react';

export default function Page() {
  return <Search size={20} />;
}

Frequently asked questions