Iconora

Production-grade SVG icon library — 60+ beautifully crafted icons for React and beyond.

---

✨ Features

• 🎨 60+ icons across 10 categories
• ⚛️ React-first — tree-shakeable, typed, and accessible
• 📦 Raw SVGs available via @iconora/core
• 🔒 TypeScript support out of the box
• ♿ Accessible — proper ARIA attributes by default
• 🌲 Tree-shakeable — import only what you use
• 🎛️ Configurable — size, color, strokeWidth, className

---

📦 Installation

# React
npm install @iconora/react

# Raw SVGs only
npm install @iconora/core

---

🚀 Usage

Named imports (recommended — best tree-shaking)

import { HomeIcon, SearchIcon, BellIcon } from '@iconora/react';

export function App() {
  return (
    <nav>
      <HomeIcon size={24} />
      <SearchIcon size={24} color="#3b82f6" />
      <BellIcon size={24} strokeWidth={1.5} className="text-gray-500" />
    </nav>
  );
}

Generic <Icon> component

import { Icon } from '@iconora/react';

<Icon name="home" size={20} />
<Icon name="heart" size={20} color="red" label="Liked" />

Props

Prop	Type	Default	Description
size	number | string	24	Width and height in px
color	string	currentColor	SVG stroke color
strokeWidth	number | string	2	SVG stroke-width
label	string	—	Accessible aria-label
className	string	—	Extra CSS class
...rest	SVGProps	—	Any valid SVG attribute

---

🗂️ Icon Categories

Category	Count
Interface	15
Arrows	10
Media	7
Communication	6
Commerce	4
Files	7
Charts	3
Nature	3
Devices	4
Security	6

---

🔍 Search & Utils

import { searchIcons, getIconsByCategory, iconNames } from '@iconora/react';

// Search by name or tag
searchIcons('arrow'); // returns matching IconMeta[]

// Get by category
getIconsByCategory('interface');

// All icon names
console.log(iconNames);

---

📄 License

MIT © Iconora