NitroIcons/Docs
IconsGitHub
Documentation

Nitro Icons

A clean, scalable icon library with 337+ icons. Auto-generated React components with full TypeScript support, tree-shaking, and inline customization.

Introduction

Nitro Icons is a developer-first icon system built for React and Next.js applications. Every icon is an individual React component — import only what you need, and your bundler tree-shakes the rest.

337+
Icons
~2kb
Bundle size
MIT
License

Installation

Install the React package from npm. The package has React 18+ as a peer dependency.

terminal
npm install @nitroicons/react

Or with other package managers:

terminal
yarn add @nitroicons/react
terminal
pnpm add @nitroicons/react

Basic Usage

Import any icon by its PascalCase name and use it as a React component.

App.jsx
import { Home, User, ArrowRight } from "@nitroicons/react";

export default function App() {
  return (
    <div>
      <Home />
      <User size={32} />
      <ArrowRight strokeWidth={2.5} />
    </div>
  );
}

Icons render as inline SVGs. They inherit the current text color by default and accept all standard SVG attributes.

Props

Every icon component accepts these props, plus all native SVG element attributes.

PropTypeDefaultDescription
sizenumber24Width and height in pixels
strokeWidthnumber2SVG stroke width
absoluteStrokeWidthbooleanfalseKeeps the stroke visually consistent across sizes
classNamestring—CSS class for styling
...propsSVGProps—All standard SVG attributes

Examples

examples.jsx
// Custom size
<Home size={48} />

// Custom stroke width
<User strokeWidth={1.5} />

// Lucide-style absolute stroke width
<Home size={18} strokeWidth={2} absoluteStrokeWidth />

// Custom color via className (Tailwind)
<ArrowRight className="text-[var(--color-accent-500)]" />

// Custom color via inline style
<Home style={{ color: "#4CFF61" }} />

// Combining props
<Download size={20} strokeWidth={2.5} className="text-emerald-400" />

Styling

Icons use currentColor for their stroke, so they inherit the text color from their parent element.

With Tailwind CSS

tailwind.jsx
// Color
<Home className="text-[var(--color-accent-500)]" />

// Size via Tailwind (override size prop)
<Home className="w-8 h-8" />

// Hover effects
<Home className="text-gray-400 hover:text-white transition-colors" />

// Responsive
<Home className="w-5 h-5 md:w-6 md:h-6" />

With inline styles

inline.jsx
<Home style={{ color: "#4CFF61", width: 32, height: 32 }} />

With CSS modules

styles.module.css
// styles.module.css
.icon {
  color: #4CFF61;
  width: 24px;
  height: 24px;
  transition: color 0.2s;
}
.icon:hover {
  color: #78FF88;
}
Component.jsx
import styles from "./styles.module.css";
import { Home } from "@nitroicons/react";

<Home className={styles.icon} />

Categories

Icons are organized into the following categories. Browse them all on the icons page. The React package also exports searchable metadata via iconsMetadata, metadataByName, categories, and iconKeywords.

ArrowsLayoutShapesAlertsCommunicationUsersMediaDevicesFilesSecurityDesignTimeWeatherCommerceMisc

Contributing

Nitro Icons is open source. To add a new icon:

  1. Add your SVG file to packages/core/icons/
  2. Add metadata to packages/core/metadata/icons.json
  3. Run the generator:
terminal
pnpm build:icons   # generates React components
pnpm build         # builds the package

SVG guidelines: use a 24x24 viewBox, stroke="currentColor", no hardcoded widths/heights, and rounded joins for consistency.

Project structure

nitro-icons/
├── packages/
│   ├── core/           # Raw SVGs + metadata
│   │   ├── icons/      # .svg files
│   │   └── metadata/   # icons.json
│   ├── react/          # Auto-generated React components
│   └── utils/          # Build utilities
├── apps/
│   └── website/        # This documentation site
└── scripts/
    └── generate-icons.ts

Ready to use?

Browse all 337+ icons and copy code instantly.

Browse Icons