🎨 React Icons Library

A fully-typed, production-ready React icon library with 137 customizable SVG icons. Tree-shakable, accessible (WCAG 2.1 AA), and TypeScript-first.

🌐 Live Demo | 📖 Documentation | 📦 NPM Package

✨ Features

• 🎨 137 Professional Icons across 17 categories (including social media icons)
• 📘 Full TypeScript Support with strict types
• ♿ WCAG 2.1 AA Accessible - ARIA labels & semantic HTML
• 🎯 Tree-Shakable - Import only what you need
• 🔧 Fully Customizable - Size, color, className, and all SVG props
• 🚀 Performance Optimized - React.memo & optimized SVG paths
• 🌍 IconProvider - Set global defaults via Context API
• 📦 Lightweight - 48KB ESM, 51KB CJS (gzipped)
• 🧪 100% Test Coverage - Comprehensive Jest tests
• 📚 Well Documented - JSDoc comments & examples
• 🔍 Searchable - Built-in metadata & search utilities

📦 Installation

npm install react-icons-library
# or
yarn add react-icons-library
# or
pnpm add react-icons-library

🚀 Quick Start

import React from 'react';
import { Home, Heart, Star, Settings, Search } from 'react-icons-library';

function App() {
  return (
    <div>
      <Home size={24} color="blue" />
      <Heart size="2em" color="#ff0000" />
      <Star className="my-icon" />
      <Settings size={32} color="currentColor" />
      <Search size="1.5rem" />
    </div>
  );
}

📚 Usage Examples

Basic Usage

import { Home, User, Settings } from 'react-icons-library';

<Home />                              // Default: 1em, currentColor
<User size={24} />                    // 24px
<Settings size="2rem" color="blue" /> // 2rem, blue

With IconProvider (Global Config)

import { IconProvider, Home, Star, Heart } from 'react-icons-library';

function App() {
  return (
    <IconProvider defaultSize={32} defaultColor="#667eea">
      <Home />   {/* Will be 32px and #667eea */}
      <Star />   {/* Will be 32px and #667eea */}
      <Heart color="red" /> {/* Will be 32px and red (override) */}
    </IconProvider>
  );
}

With Custom Styling

import { Search } from 'react-icons-library';

<Search 
  size={40}
  color="#667eea"
  className="my-custom-icon"
  style={{ cursor: 'pointer' }}
  onClick={() => console.log('clicked')}
/>

Accessibility

import { Download } from 'react-icons-library';

<Download 
  title="Download file"  // Adds accessible title
  aria-label="Download"  // Screen reader label
  role="img"             // Semantic role
/>

📋 Available Icons (128 Total)

🎯 Actions (25)

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | string \| number | "1em" | Icon size (can be px, em, rem, etc.) | | color | string | "currentColor" | Icon color (any valid CSS color) | | className | string | "" | Additional CSS classes | | title | string | undefined | Accessible title for the icon |

All standard SVG attributes are also supported.

Creating Custom Icons

You can create your own icons using the IconBase component:

import React from 'react';
import { IconBase, IconProps } from '@your-org/react-icon-library';

export const CustomIcon: React.FC<IconProps> = (props) => {
  return (
    <IconBase {...props}>
      <path d="YOUR_SVG_PATH_DATA" />
    </IconBase>
  );
};

Development

Build

npm run build

Watch Mode

npm run dev

License

MIT