Modo Icon

A premium React icon library featuring 2200+ high-quality icons in both Fill and Duotone styles.

Features

• 2200+ Icons: Comprehensive collection covering various categories.
• Dual Styles: Every icon comes in Fill and Duotone variants.
• Categorized & AI Optimized: Includes a machine-readable icons.json for AI tools to effortlessly find the right icons.
• Highly Customizable: Easily change size and color via props.
• Duotone Effect: Duotone icons use a smart currentColor with 0.25 opacity for the secondary layer, ensuring they look great on any background.
• Lightweight: Optimized tree-shaking support.
• Typescript: Full type definitions included.

Installation

npm install @wuhui0105/modo-icon

Usage

Basic Usage

import { AbstractFill, AbstractDuotone } from '@wuhui0105/modo-icon';

function MyComponent() {
  return (
    <div>
      {/* Fill Style */}
      <AbstractFill size="24px" color="#324558" />
      
      {/* Duotone Style */}
      <AbstractDuotone size="2em" />
    </div>
  );
}

Custom Styling

Icons inherit the parent's font color by default (currentColor). You can also use CSS to style them:

.my-custom-icon {
  color: #1890ff;
  font-size: 32px;
}

Icon Naming Convention

• Fill Icons: [Name]Fill (e.g., HeartFill, SettingsFill)
• Duotone Icons: [Name]Duotone (e.g., HeartDuotone, SettingsDuotone)

AI Optimization & Categorization

This library is designed to be AI-friendly. It includes a categorized icons.json file that AI agents (like Cursor, Windsurf, or Copilot) can use to "understand" the library's contents and pick the most appropriate icons for your code.

Using with AI

You can tell your AI assistant:

"Look at node_modules/@wuhui0105/modo-icon/icons.json to find the best icon for the 'User Profile' feature."

Categories Available

| Category | Description | | :--- | :--- | | Arrows & Navigation | Arrows, Chevrons, Directional icons | | Common Actions | Add, Delete, Search, Settings, Edit | | Communication | Messages, Mail, Phone, Notifications | | Files & Folders | Documents, Folders, Notes, Books | | Users & Teams | Human, Group, Contact icons | | Data & Analytics | Charts, Grids, Tables, Topology | | Hardware & Devices | Server, CPU, Network, Terminal, Monitors | | Cloud & Infra | Cloud, Map, Pin, Domain, Gateway | | Finance & Commerce | Money, Wallet, Card, Cart, Bill | | Media & Content | Play, Music, Camera, Picture | | Security & Legal | Shield, Lock, Key, Verified | | Brands & Platforms | Tech logos (Github, Google, React, etc.) |

License

MIT