@plusuidesign/iconiverse-react

A comprehensive React icon library with 5,944+ icons featuring both filled and outlined variants. Built for modern React applications with full TypeScript support, tree-shaking, and zero dependencies.

Features

✨ 5,944+ Icons - Comprehensive collection across 43 categories
🎨 Dual Variants - Both filled and outlined styles
📦 Tree-Shakeable - Only bundle the icons you use
🔷 TypeScript First - Full type safety and IntelliSense
⚡ Zero Dependencies - Standalone package, no external runtime deps
🎯 Framework Optimized - Built specifically for React
🌐 SSR Compatible - Works with Next.js, Remix, and Gatsby
♿ Accessible - Built-in accessibility features

Installation

npm install @plusuidesign/iconiverse-react
# or
pnpm add @plusuidesign/iconiverse-react
# or
yarn add @plusuidesign/iconiverse-react

Usage

Basic Usage

import { HeartFilled, StarOutlined, UserFilled } from '@plusuidesign/iconiverse-react';

function App() {
  return (
    <div>
      <HeartFilled />
      <StarOutlined className="text-yellow-500" />
      <UserFilled size={32} color="#ff0000" />
    </div>
  );
}

With Tailwind CSS

import { SearchOutlined, MenuFilled } from '@plusuidesign/iconiverse-react';

function Header() {
  return (
    <header className="flex items-center gap-4 p-4">
      <MenuFilled className="w-6 h-6 text-gray-700" />
      <SearchOutlined className="w-5 h-5 text-gray-500" />
    </header>
  );
}

Props

All icon components accept the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | string \| number | 24 | Icon size (width & height) | | color | string | 'currentColor' | Icon color | | strokeWidth | string \| number | 2 | Stroke width for outlined icons | | className | string | '' | CSS class names | | absoluteStrokeWidth | boolean | false | Adjusts stroke width based on icon size |

Plus all standard SVG attributes (onClick, style, aria-label, etc.)

Advanced Examples

Custom Size and Color

<HeartFilled 
  size={48} 
  color="#e74c3c" 
  className="hover:scale-110 transition-transform"
/>

With Click Handler

<StarOutlined 
  size={24}
  onClick={() => console.log('Star clicked')}
  className="cursor-pointer"
/>

Accessible Icons

<SearchOutlined 
  aria-label="Search"
  role="img"
  size={20}
/>

Dynamic Icons

const iconMap = {
  heart: HeartFilled,
  star: StarFilled,
  user: UserFilled,
};

function DynamicIcon({ name }: { name: keyof typeof iconMap }) {
  const Icon = iconMap[name];
  return <Icon size={24} />;
}

Icon Categories

Icons are organized into 43 categories:

• Animals, Arrows, Badges, Brand, Buildings
• Charts, Communication, Computers, Currencies, Database
• Design, Development, Devices, Document, E-commerce
• Electrical, Extensions, Food, Games, Gender
• Gestures, Health, Laundry, Letters, Logic
• Map, Math, Media, Misc, Mood
• Nature, Numbers, Photography, Shapes, Sport
• Symbols, System, Text, Vehicles, Version control
• Weather, Zodiac

Icon Variants

Each icon comes in two variants:

• Filled - Solid, filled version (suffix: Filled)
• Outlined - Outlined version (suffix: Outlined)

Example:

import { HeartFilled, HeartOutlined } from '@plusuidesign/iconiverse-react';

Tree-Shaking

This package is optimized for tree-shaking. Only the icons you import will be included in your bundle:

// ✅ Good - Only HeartFilled is bundled
import { HeartFilled } from '@plusuidesign/iconiverse-react';

// ❌ Avoid - Imports everything
import * as Icons from '@plusuidesign/iconiverse-react';

TypeScript

Full TypeScript support out of the box:

import type { IconProps } from '@plusuidesign/iconiverse-react';
import { HeartFilled } from '@plusuidesign/iconiverse-react';

const CustomIcon: React.FC<IconProps> = (props) => {
  return <HeartFilled {...props} />;
};

Next.js

Works seamlessly with Next.js 13+ (App Router and Pages Router):

// app/page.tsx
import { StarFilled } from '@plusuidesign/iconiverse-react';

export default function Page() {
  return <StarFilled size={32} />;
}

Creating Custom Icons

You can create custom icon components using the createIcon helper:

import { createIcon } from '@plusuidesign/iconiverse-react';

const CustomIcon = createIcon(
  'CustomIcon',
  [
    ['path', { d: 'M10 10 L20 20', stroke: 'currentColor' }],
    ['circle', { cx: '15', cy: '15', r: '5', fill: 'currentColor' }],
  ]
);

Performance Tips

1. Import only what you need - Leverage tree-shaking
2. Use CSS classes - Prefer className over inline styles
3. Memoize when needed - Use React.memo for frequently re-rendered icons
4. Lazy load large sets - Consider dynamic imports for icon pickers

// Lazy loading example
const iconModules = {
  heart: () => import('@plusuidesign/iconiverse-react').then(m => m.HeartFilled),
  star: () => import('@plusuidesign/iconiverse-react').then(m => m.StarFilled),
};

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• React 16.8+ (Hooks support required)

Contributing

This is part of the Iconiverse icon library project. For issues, feature requests, or contributions, please visit our GitHub repository.

License

MIT © PlusUI Design

Related Packages

• @plusuidesign/iconiverse-core - Core icon data (for building other framework integrations)

Made with ❤️ by Plus UI Design