Nitro Icons React

Clean, scalable SVG icon components for React. Tree-shakeable, TypeScript-ready, and fully customizable.

Browse all icons | Documentation | GitHub

Installation

npm install nitro-icons-react

pnpm add nitro-icons-react

yarn add nitro-icons-react

Quick Start

import { Home, User, ArrowRight } from "nitro-icons-react";

function App() {
  return (
    <nav>
      <Home size={24} />
      <User size={24} strokeWidth={1.5} />
      <ArrowRight size={24} color="#ff00dc" />
    </nav>
  );
}

Props

Every icon component accepts these props, plus any valid SVGSVGElement attribute:

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | 24 | Width and height in pixels | | strokeWidth | number | 2 | SVG stroke width | | color | string | "currentColor" | Stroke color (any CSS color) | | className | string | — | CSS class name | | style | CSSProperties | — | Inline styles | | ref | Ref<SVGSVGElement> | — | Forwarded ref to the SVG element |

All standard SVG attributes (onClick, aria-label, data-*, etc.) are also supported via ...props.

Styling

With Tailwind CSS

Icons use currentColor by default, so they inherit text color:

<Home className="text-red-500" size={32} />
<User className="text-blue-500 hover:text-blue-700 transition-colors" />

With inline color

<Home color="#ff00dc" size={32} />
<User color="rgb(59, 130, 246)" />

With CSS

.icon {
  color: #ff00dc;
  width: 32px;
  height: 32px;
}

<Home className="icon" />

Ref Forwarding

All icons use forwardRef, so you can access the underlying SVG element:

import { useRef } from "react";
import { Home } from "nitro-icons-react";

function App() {
  const svgRef = useRef<SVGSVGElement>(null);

  return <Home ref={svgRef} size={24} />;
}

Accessibility

Add aria-label for icons that convey meaning:

<Home aria-label="Go to homepage" role="img" />

For decorative icons, hide them from screen readers:

<Home aria-hidden="true" />

Tree Shaking

The package is marked sideEffects: false and ships ESM. Only the icons you import are included in your bundle:

// Only Home is bundled — other icons are tree-shaken out
import { Home } from "nitro-icons-react";

Available Icons

| Icon | Component | Category | |------|-----------|----------| | Alert Circle | <AlertCircle /> | Alerts | | Arrow Down | <ArrowDown /> | Arrows | | Arrow Left | <ArrowLeft /> | Arrows | | Arrow Right | <ArrowRight /> | Arrows | | Arrow Up | <ArrowUp /> | Arrows | | Battery | <Battery /> | Devices | | Bell | <Bell /> | Alerts | | Chevron Left | <ChevronLeft /> | Arrows | | Chevron Right | <ChevronRight /> | Arrows | | Chevron Up | <ChevronUp /> | Arrows | | Circle | <Circle /> | Shapes | | Clock | <Clock /> | General | | Download | <Download /> | Actions | | Grid | <Grid /> | Layout | | Home | <Home /> | Navigation | | Menu | <Menu /> | Navigation | | Minus | <Minus /> | Actions | | Pen Tool | <PenTool /> | Editor | | Plus | <Plus /> | Actions | | Plus Circle | <PlusCircle /> | Actions | | Smartphone | <Smartphone /> | Devices | | User | <User /> | People | | Youtube | <Youtube /> | Social |

TypeScript

Full type definitions are included. Import the IconProps type for custom wrappers:

import type { IconProps } from "nitro-icons-react";

function IconButton({ icon: Icon, ...props }: { icon: React.FC<IconProps> } & IconProps) {
  return (
    <button>
      <Icon {...props} />
    </button>
  );
}

<IconButton icon={Home} size={20} color="#ff00dc" />

Compatibility

• React 18+
• Next.js 13+ (App Router and Pages Router)
• Vite, Remix, Gatsby, CRA
• Works in Server Components and Client Components

License

MIT