Building Reicon - 2,700+ UI Icons

Every frontend developer hits the same wall when building a real product: you pick an icon library, you design the first three screens, and then you need a specific icon for a filter drawer or export menu. The library does not have it.

So you hunt across a second library. Now your dashboard has two different stroke weights, mismatched corner radii, and inconsistent optical centers. It feels patched together.

I built Reicon to solve that once and for all: a clean, unified open-source icon system of 2,700+ UI SVG icons built on a disciplined 24x24 grid, distributed across 7 frameworks, and equipped with native MCP support so AI agents can query and use them without hallucinating paths.

The Three Core Rules

To keep a library of 2,700+ icons coherent across every category, every single glyph adheres to three non-negotiable rules:

1. Strict 24x24 grid discipline. Every path sits within a 24x24 pixel boundary. Outlines use a precise 1.5px stroke with round terminals. Padding and optical weights are calibrated so a battery icon and an arrow share the exact same visual presence.
2. Zero runtime bloat. Each icon is exported as an independent, tree-shakable component. Importing one icon adds only that single SVG to your bundle - no shared runtime overhead, no massive index files.
3. Three unified style variations. Every icon is available in Outline, Filled, and Duotone so you never have to mix-and-match from different sources when your UI changes state.

Interactive Style Preview

Switch styles below to see how the geometry translates between outline, solid fill, and dual-opacity duotone:

One Dataset, Seven Package Ecosystems

Managing thousands of SVG icons manually across multiple frameworks is unsustainable. Reicon uses a single compiler pipeline driven by a structured dataset at data/icon-data.json.

When a new icon is added, the build script validates its stroke width and viewBox, runs SVG path compression, and compiles it into:

• reicon-react: React components with full TypeScript support and ref forwarding.
• reicon-vue: Vue 3 single-file component tree with props for size, color, and weight.
• reicon-svelte: Svelte 4 and 5 compatible components.
• reicon_flutter: Native Flutter SVG widgets for mobile development.
• reicon-figma: A dedicated Figma plugin for direct drag-and-drop design workflows.
• reicon-vscode: VS Code extension displaying inline icon previews next to import statements.
• reicon-mcp: Model Context Protocol server enabling AI agents to search and inspect icons programmatically.

Built for the AI Agent Era

AI coding assistants (Cursor, Claude Code, Antigravity) are rewriting how software gets built. But icons remain a major friction point: models frequently hallucinate icon names that do not exist, or generate distorted inline SVGs with incorrect viewBox coordinates.

Reicon solves this directly with reicon-mcp, a native Model Context Protocol server:

{
  "mcpServers": {
    "reicon": {
      "command": "npx",
      "args": ["reicon-mcp"]
    }
  }
}

With this configuration, your AI agent can query the entire Reicon catalog, retrieve exact component names, inspect viewBox dimensions, and drop verified icons directly into your code.

For lightweight agent workflows, Reicon also serves plain-text documentation endpoints at reicon.dev/llms.txt and reicon.dev/llms-full.txt.

Quick Start

Install the React package with your favorite package manager:

npm install reicon-react

Import any icon directly as an individual, tree-shaken component:

import { Prism, Crystal, Ripple } from 'reicon-react';

export default function Dashboard() {
  return (
    <div style={{ display: 'flex', gap: 12 }}>
      <Prism size={20} weight="Outline" color="#000000" />
      <Crystal size={20} weight="Filled" color="#000000" />
      <Ripple size={20} weight="Duotone" color="#000000" />
    </div>
  );
}

Or use the zero-install CDN runtime with a custom Web Component:

<script src="https://unpkg.com/reicon/cdn/reicon.js"></script>

<re-icon icon="prism" weight="outline" size="24"></re-icon>

Open Source & Credits

Reicon is 100% open-source under the MIT license. You can use it in personal projects, client work, commercial SaaS platforms, and digital products without restrictions.

The base geometry builds upon foundational elements from Solar Icons (designed by 480 Design, CC BY 4.0, package maintained by Saoudi H. under MIT) and Zappicon. The entire compiler pipeline, framework wrappers, MCP server, and documentation site are available on GitHub.

Explore the complete searchable catalog of 2,700+ icons with one-click SVG and JSX copying at reicon.dev.

Frequently Asked Questions