Iconx

An agent-friendly CLI to manage and install icons in React projects.

An agent-friendly CLI to manage and install icons in React projects. You or your agent can add, search, and list icons from the terminal — or through the MCP server. Components are generated from Iconify into your repo.

About

Iconx allows you to:

🚀 Generate React components from 200,000+ icons across 150+ icon sets
📝 Full TypeScript support with proper types and interfaces
⚙️ Configurable output directory, icon sizes, and aliases
🔧 CLI and MCP (Model Context Protocol) server support
🎨 Customizable icon size with runtime override support
🏷️ Icon aliasing for better naming conventions

This package wouldn't be possible without the great work of Vjacheslav Trushkin.

Why does this exist?

react-icons is heavy and tree-shakes poorly. Icon fonts are inaccessible. Copying SVGs does not scale — and agents should not paste them. Iconx is the CLI (and MCP server) they can call instead. See the docs to get started.

Quick Start

Initialize configuration:
```
npx iconx init
```

Add icons to your project:

# With explicit icon set
npx iconx add --set lucide home user settings

# Using default icon set (if configured)
npx iconx add home user settings

# Alias
npx iconx add house:home cog:settings user:profile

Use generated components:

import { HomeIcon } from './components/icons/home-icon'
import { SettingsIcon } from './components/icons/settings-icon'
import { UserIcon } from './components/icons/user-icon'

function App() {
  return (
    <div>
      <HomeIcon size="24px" />
      <UserIcon className="text-blue-500" />
      <SettingsIcon size="1.5rem" />
    </div>
  )
}

Popular Icon Sets

Iconify React supports all icon sets available in the Iconify library. Popular choices include:

Lucide (lucide) - Modern, clean icons
Heroicons (heroicons) - Tailwind CSS icons
Tabler Icons (tabler) - Free SVG icons
Feather (feather) - Simple, beautiful icons
Phosphor (phosphor) - Flexible icon family
Material Design Icons (mdi) - Google's Material Design
Font Awesome (fa-solid, fa-regular, fa-brands) - Popular icon library

Browse all available icons at Iconify Icon Sets.

Generated Components

Each generated component includes:

import React from 'react'

export interface HomeIconProps extends React.SVGProps<SVGSVGElement> {
  size?: number | string
}

/**
 * home
 * Lucide
 * @url https://icon-sets.iconify.design/lucide
 * @license MIT
 * @version 1.0.0
 */
export const HomeIcon: React.FC<HomeIconProps> = ({ size, ...props }) => {
  return (
    <svg
      width={size || '1em'}
      height={size || '1em'}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      {/* SVG content */}
    </svg>
  )
}

TypeScript Support

All generated components are fully typed with:

Proper TypeScript interfaces
SVG props inheritance
Size prop with string or number support
JSDoc comments with icon metadata

Next Steps

Installation