React Icons

Include popular icon sets in React via ES imports; only the icons you use are bundled.

Installation

pnpm add react-icons

Import pattern

Import from react-icons/{set}. Icon names are PascalCase.

import { FaBeer } from "react-icons/fa";
import { HiOutlineUser } from "react-icons/hi2";
import { LuChevronRight } from "react-icons/lu";

export function Example() {
  return (
    <>
      <FaBeer />
      <HiOutlineUser className="size-5" />
      <LuChevronRight aria-hidden />
    </>
  );
}

Icon set prefixes (import path)

Usage in this project

• •Next.js / React: Use as components; they render inline SVG.
• •Styling: Pass className (e.g. Tailwind size-5, text-muted-foreground) or style. Default size is 1em.
• •A11y: For decorative icons, add aria-hidden="true". For meaningful icons, pair with visible text or use aria-label on a wrapper.

Finding icon names

• •Browse by set: https://react-icons.github.io/react-icons/icons/ (e.g. /icons/fa/, /icons/lu/).
• •Naming: set prefix + PascalCase (e.g. Fa + Beer → FaBeer, Lu + ChevronRight → LuChevronRight).

Large projects (optional)

For very large apps (e.g. Gatsby) where install time matters:

pnpm add @react-icons/all-files

import { FaBeer } from "@react-icons/all-files/fa/FaBeer";

Prefer the default react-icons package unless bundle/install size is an issue.