Reicon

Overview

Reicon is an open-source vector icon and illustration ecosystem for modern designers and frontend engineers, featuring 1.3k+ GitHub Stars. It delivers 3,900+ handcrafted SVG icons, 71,000+ vector illustrations, and 4,900+ brand logos with native components across React, Vue, Svelte, React Native, and Flutter.

Key Features

• Extensive Asset Catalog: Over 3,900+ pixel-perfect SVG icons, 71,000+ illustrations across 75+ categories, and 4,900+ brand marks.
• Zero Runtime & Tree-Shakeable: Clean SVG components with full TypeScript typing and automatic bundle size elimination for unused icons.
• Multi-Framework Cohesion: First-class packages for React (reicon-react), Vue (reicon-vue), Svelte (reicon-svelte), React Native, and Flutter.
• AI-Native MCP Server: Ships with a dedicated reicon-mcp package enabling AI coding agents to search, preview, and inject icons directly in editor workflows.

Installation & Quick Start

# Install React icon package
npm install reicon-react

import React from 'react';
import { Sparkles, ArrowRight, ShieldCheck } from 'reicon-react';

export function FeatureBadge() {
  return (
    <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-xl bg-card border border-border">
      <Sparkles size={16} className="text-amber-500" />
      <span className="text-xs font-medium text-foreground">Verified Asset</span>
      <ShieldCheck size={16} className="text-emerald-500" />
    </div>
  );
}

Why Choose Reicon?

1. Unified Design Ecosystem: Combines UI icons, rich illustrations, and brand badges under one consistent API across web and mobile frameworks.
2. AI Agent Acceleration: MCP integration allows Cursor and Claude Code to search and compose icon components automatically during code generation.