Reicon

An open-source SVG icon library featuring 2,700+ icons with dedicated packages for React, React Native, Vue 3, Svelte, vanilla JavaScript, CDN runtime, Figma design workspace, VS Code code editor, and MCP Server for AI agents.

Website · Browse Icons · Docs Guide · npm

  Overview

Reicon provides a comprehensive set of SVG icons designed on a strict 24×24 pixel grid. The library is built for high-performance web applications, offering complete tree-shakeability, zero external dependencies, and optimized wrappers for multiple frameworks.

All icons are maintained in two weights:

• Outline: 1.5px stroke-width with consistent corner radiuses.
• Filled: Solid path structures designed for active states or highlighted UI elements.

  Packages & Ecosystem

Logo	Package	Version	Downloads	Links
	reicon			Guide · Source
	reicon-react			Guide · Source
	reicon-react-native			Guide · Source
	reicon-vue			Guide · Source
	reicon-svelte			Guide · Source
	reicon-figma	—	—	Guide · Source
	reicon-vscode		—	Guide · Source
	reicon-mcp			Guide · Source
	reicon-svg	—	—	Guide · Download

  Quick Start

React Usage

import { Heart } from 'reicon-react';

function App() {
  return <Heart size={24} weight="Outline" color="#000000" />;
}

Vue 3 Usage

<script setup>
import { Heart } from 'reicon-vue';
</script>

<template>
  <Heart :size="24" weight="Filled" color="#000000" />
</template>

Svelte Usage

<script>
import { Heart } from 'reicon-svelte';
</script>

<Heart size={24} weight="Outline" color="#000000" />

HTML / CDN Usage

<!-- Load the library -->
<script src="https://unpkg.com/reicon/cdn/reicon.min.js"></script>

<!-- Render the web component -->
<re-icon icon="heart" weight="outline" size="24"></re-icon>

MCP Server Usage

Connect AI agents to Reicon via the Model Context Protocol:

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

Agents can search icons, preview SVG markup, and generate framework-specific code snippets. See the MCP guide for tools reference and CLI usage.

  Agent Usage

Reicon provides dedicated LLM-friendly reference files so AI agents (Claude, Cursor, Copilot, etc.) immediately know how to install, import, and render Reicon icons across all frameworks.

File	Purpose
llms.txt	Quick reference — Agent workflow, install commands, usage snippets, and props tables for all 6 frameworks + CDN + MCP in one page
llms-full.txt	Deep reference — Package versions, full framework docs, TypeScript types, data architecture, comparison table, and expanded FAQ
llms-icons.txt	Icon directory — All 2,700+ icons listed by category with kebab-case → PascalCase name mapping

These files are publicly available at:

• https://reicon.dev/llms.txt
• https://reicon.dev/llms-full.txt
• https://reicon.dev/llms-icons.txt

When using the MCP Server, agents can also search icons, view SVG markup, and generate framework code programmatically with zero network calls.

  Project Structure

This project is organized as a monorepo holding the core dataset, package compilations, build scripts, and the showcase documentation site.

For a detailed file-by-file breakdown of the directory layout and file responsibilities, see the Project Structure Guide.

  Design System

The documentation site uses a custom layout system built using CSS custom variables and Tailwind CSS utility tokens.

For the specifications on typography scales, responsive breakpoints, animations, and reusable site components, see the Design System Guide.

---

  Development & Building

Running the Documentation Site

To start the React/Vite development server locally for the documentation website:

npm install
npm run dev

Compiling Packages from Source

The core icons are maintained in data/icon-data.json, which acts as the single source of truth for the entire library.

1. Modify or add icons inside data/icon-data.json.
2. Run the compiler scripts to update all framework packages and CDN runtimes:

   npm run build:packages

3. Rebuild the website with updated package paths and prerendered SEO meta tags:

   npm run build:full

  Contributing

Contributions to the codebase, packages, or documentation are welcome. Please refer to our Contributing Guidelines for conventions on pull requests, testing, and formatting.

  Our Stargazers

  Credits

Reicon base icons are built using elements from:

• Solar Icons designed by 480 Design (CC BY 4.0) and package maintained by Saoudi H. (MIT License)
• Zappicon (licensed under the Zappicon License)

  License

MIT License - Copyright (c) 2026 Dev Chauhan.