npm package: @nitroicons/react
Description: Clean, scalable SVG icon components for React and Next.js. Tree-shakeable, TypeScript-ready, customizable size/color/stroke. Works with Tailwind CSS, Server Components, and all major frameworks.
Author: Ratnesh Kumawat
Latest version: 1.0.2

# Nitro Icons React

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

[![npm version](https://img.shields.io/npm/v/@nitroicons/react.svg)](https://www.npmjs.com/package/@nitroicons/react)
[![license](https://img.shields.io/npm/l/@nitroicons/react.svg)](https://github.com/RatneshDesign/NitroIcons/blob/main/LICENSE)
[![bundle size](https://img.shields.io/bundlephobia/minzip/@nitroicons/react)](https://bundlephobia.com/package/@nitroicons/react)

[Browse all icons](https://nitroicons.vercel.app/icons) | [Documentation](https://nitroicons.vercel.app/docs) | [GitHub](https://github.com/RatneshDesign/NitroIcons)

## Installation

```bash
npm install @nitroicons/react
```

```bash
pnpm add @nitroicons/react
```

```bash
yarn add @nitroicons/react
```

## Quick Start

```tsx
import { Home, User, ArrowRight } from "@nitroicons/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:

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

### With inline color

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

### With CSS

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

```tsx
<Home className="icon" />
```

## Ref Forwarding

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

```tsx
import { useRef } from "react";
import { Home } from "@nitroicons/react";

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

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

## Accessibility

Add `aria-label` for icons that convey meaning:

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

For decorative icons, hide them from screen readers:

```tsx
<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:

```tsx
// Only Home is bundled — other icons are tree-shaken out
import { Home } from "@nitroicons/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:

```tsx
import type { IconProps } from "@nitroicons/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](./LICENSE)