Reicon React
2674+ pixel-perfect SVG icons • Outline & Filled weights • React component wrapper • Zero dependencies • MIT Licensed
Install •
Usage •
Props •
Tree-shaking •
Icon Names •
TypeScript
**Reicon React** is the official React package for Reicon — a free, open-source SVG icon library featuring 2674+ handcrafted, grid-aligned icons. Every component is tree-shakeable, fully TypeScript-ready, and ships with zero dependencies.
| 🔗 Resource | Link |
|---|---|
| 🌐 Website & icon browser | [reicon.dev](https://reicon.dev) |
| 📖 Documentation | [reicon.dev/docs](https://reicon.dev/docs) |
| 📦 Core package (vanilla JS) | [reicon](https://npmjs.com/package/reicon) |
| 🎨 Figma plugin | [reicon.dev/docs/figma](https://reicon.dev/docs/figma) |
---
## Install
```bash
npm i reicon-react
# or
bun add reicon-react
# or
yarn add reicon-react
```
Requirements
- **React** ≥ 16.8 (Hooks-compatible)
- No other dependencies required.
---
## Usage
### Basic
```jsx
import { Home, ShieldCheck, AltArrowDown } from 'reicon-react';
function App() {
return (
);
}
```
### Weights
Every icon ships in two weights — **Outline** (default) and **Filled**:
```jsx
import { Home } from 'reicon-react';
{/* Outline (default) */}
{/* Filled */}
```
### Sizing & coloring
```jsx
{/* 32×32px */}
{/* Custom size and color */}
{/* Inherits parent text color */}
```
### Direct icon import (smallest bundle)
For the absolute minimum bundle size, import icons directly from the sub-path:
```jsx
import Home from 'reicon-react/icons/Home';
import ShieldCheck from 'reicon-react/icons/ShieldCheck';
```
### All SVG attributes are supported
Pass any standard SVG attribute — `className`, `style`, `onClick`, `aria-*`, etc.:
```jsx
console.log('clicked')}
aria-label="Home"
/>
```
---
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `number | string` | `24` | Icon width & height (number = px) |
| `color` | `string` | `currentColor` | Primary icon stroke/fill color |
| `secondaryColor` | `string` | same as `color` | Secondary (accent) fill color |
| `weight` | `'Outline' | 'Filled'` | `'Outline'` | Icon style variant |
| `strokeWidth` | `number | string` | — | Override the default stroke width |
| `className` | `string` | — | Additional CSS class on the