🌟 Modern Icons

A massive, high-performance, and fully tree-shakeable icon library for React. Featuring over 10,000+ premium icons aggregated from the web's best open-source collections, including unique animated variants.

🚀 Features

• Massive Collection: 10,000+ icons in one package.
• Micro-Animations: Built-in animated icons (Spinners, Hearts, Gears, etc.) with the Ani prefix.
• Smart Tree-shaking: Only the icons you actually use end up in your final bundle.
• TypeScript First: 100% type-safe with perfect IntelliSense.
• Stylable: Inherits currentColor and font-size by default.
• Zero Dependencies: Lightweight at runtime.

📦 Collections Included

| Prefix | Source | Description | | :--- | :--- | :--- | | Hi | Heroicons | Beautifully crafted 24x24 outline icons. | | His | Heroicons Solid | Solid versions of the Heroicons set. | | Lu | Lucide | Community-run fork of Feather, very comprehensive. | | Tb | Tabler | 4,900+ minimalist outline icons. | | Ri | Remix | 3,000+ high-quality neutral icons. | | Fi | Feather | Simply beautiful open source icons. | | Rx | Radix | Crisp, professional icons from the Radix UI team. | | Ani | Animated | Unique pulse, spin, and bounce animations. |

🛠 Installation

npm install modern-icons
# or
yarn add modern-icons

💻 Usage

Import only what you need. All icons support standard SVG props including className, style, and color.

Basic Usage

import { HiHome, LuUser, AniSpinner } from 'modern-icons';

function App() {
  return (
    <div>
      {/* Defaults to currentColor and 1em (inherited from parent font-size) */}
      <HiHome />
      
      {/* Use the Ani prefix for smooth micro-animations */}
      <AniSpinner className="w-5 h-5 text-blue-500" />
      
      {/* Easy styling with CSS or Utility classes */}
      <LuUser style={{ color: '#6366f1', fontSize: '24px' }} />
    </div>
  );
}

Advanced Styling

Since icons inherit currentColor, you can switch themes easily:

<div style={{ color: 'var(--brand-primary)', fontSize: '2rem' }}>
    <HiLightningBolt />
</div>

🎨 Interactive Playground

We ship a premium playground application in the /playground directory.

1. cd playground
2. npm install
3. npm run dev

Search 10k+ icons, customize colors, and copy code snippets instantly.

📄 License

Distributed under the MIT License. See LICENSE for more information. Created with ❤️ by Kishan.