@agentable/icons-react

Lightweight, high-performance React icon library providing a massive collection of carefully designed SVG icons with Tree-Shaking support by default.

Features

• 🚀 Plug and Play: Each icon is an independent React component
• 📦 Tree-Shakable: Only bundle the icons you actually import
• 🎨 Fully Customizable: Control size, color, and stroke through props
• 🔧 TypeScript: Complete type definitions out of the box

Installation

::: code-group

pnpm add @agentable/icons-react

yarn add @agentable/icons-react

npm install @agentable/icons-react

:::

Quick Start

1. Named Import (Recommended)

import { Home, User } from '@agentable/icons-react';

const App = () => (
  <div>
    <Home />
    <User color='tomato' size={32} />
  </div>
);

2. Direct Path Import (Fastest Build)

import Home from '@agentable/icons-react/icons/Home';

const App = () => <Home />;

Props

| Name | Type | Default | Description | | --------------------- | ------------------ | -------------- | ------------------------------------ | | size | number \| string | 24 | Width & height (in px) | | color | string | currentColor | Stroke color | | strokeWidth | number | 2 | Stroke width | | absoluteStrokeWidth | boolean | false | Auto-scale stroke based on icon size |

Supports all native SVG SVGSVGElement attributes.

Migration from Lucide React

APIs are fully compatible, just replace the package name:

-import { Home } from 'lucide-react';
+import { Home } from '@agentable/icons-react';

Made with ❤️ by Agentable