Blog :

Building Reicon — An Open-Source SVG Icon Library with 2,700+ Icons

by Dev Chauhan
Reicon — Free Open-Source Icon Library

The Idea

It started with a simple frustration. Every time I started a new project, I'd search for icons — browsing through dozens of libraries, comparing styles, checking licenses, and eventually settling for something that was either too heavy, inconsistent, or missing the icons I actually needed.

I wanted a single library that was:

  • Lightweight — import only what you need
  • Consistent — every icon drawn in the same style and viewBox
  • Open-source — no restrictive licenses, no hidden paywalls
  • Extensible — easy to customize and add to

That's why I built Reicon.

What is Reicon?

Reicon is an open-source SVG icon library that ships over 2,700 handcrafted icons. Every icon is:

  • Drawn on a 24×24 grid with consistent 1.5px stroke widths (Outline) or solid paths (Filled)
  • Optimized for tree-shaking — you only bundle what you use
  • Distributed via npm, available as a CDN, and accessible through a searchable web interface at reicon.dev

The library covers a wide range of categories: arrows, UI controls, media, communication, files, weather, brands, and more — all available in two weights: Outline (1.5px stroke) and Filled (solid paths).

Packages & Ecosystem

Reicon provides dedicated packages for every major framework and platform:

  • reicon — Core vanilla JavaScript package
  • reicon-react — React components with full TypeScript support
  • reicon-react-native — React Native optimized icons
  • reicon-vue — Vue 3 components
  • reicon-svelte — Svelte components
  • reicon_flutter — Flutter/Dart package
  • reicon-figma — Figma plugin for design workflows
  • reicon-vscode — VS Code extension for inline icon previews
  • reicon-mcp — MCP Server for AI agents

There's also a CDN runtime with a Web Component (<re-icon>) for drop-in use in any HTML page, and raw SVG downloads via ZIP.

Design Philosophy

Every icon in Reicon is designed with a few guiding principles:

  1. Consistency above all. A 24×24 viewBox, 2px stroke, round caps and joins — these parameters never vary. It means you can mix any icons from the library and they'll look like they belong together.
  2. Minimalism without sacrificing meaning. Each icon is stripped to its essential form. If a detail doesn't add to recognition, it's removed.
  3. Accessibility built-in. Icons include proper aria-label attributes and semantic metadata. They're designed to work with screen readers and assistive technologies out of the box.

Building the Library

Tooling

The library is built with a custom Node.js pipeline that:

  • Reads raw SVG source files from a structured directory
  • Validates each icon against the style guide (viewBox, stroke, color)
  • Optimizes paths using SVG path data compression
  • Generates ESM and CJS bundles
  • Produces TypeScript definitions automatically

The Search Experience

reicon.dev is built as a search-first interface. You can browse by category, search by keyword, or filter by style. Every icon page includes:

  • Live preview at multiple sizes
  • SVG code snippet with one-click copy
  • React component import code
  • Download as SVG file

The search indexes icon names, aliases, tags, and categories — so finding the right icon is fast.

AI & MCP Support

Reicon ships with a dedicated MCP Server (reicon-mcp) that connects AI agents to the icon library via the Model Context Protocol. Agents can search icons, preview SVG markup, and generate framework-specific code snippets programmatically.

For LLM-friendly workflows, Reicon also provides:

  • llms.txt — Quick reference with install commands, usage snippets, and props tables
  • llms-full.txt — Deep reference with full framework docs, types, and architecture
  • llms-icons.txt — Complete icon directory with name mappings

These files are publicly available at reicon.dev/llms.txt and are designed so that AI agents (Claude, Cursor, Copilot, etc.) immediately know how to install, import, and render icons.

Quick Start

Using Reicon in your project is straightforward. Here's how to get started with each framework:

React

npm install reicon-react
import { Heart } from 'reicon-react';

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

Vue 3

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

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

Svelte

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

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

Flutter

flutter pub add reicon_flutter
import 'package:reicon_flutter/reicon_flutter.dart';
import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.string(
  reiconSvg(Reicon.outline.heart, size: 24),
)

HTML / CDN

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

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

MCP Server

Connect AI agents to Reicon via the Model Context Protocol:

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

Project Structure

Reicon is organized as a monorepo holding the core dataset, package compilations, build scripts, and the showcase documentation site. The single source of truth is data/icon-data.json, which feeds the compiler pipeline that generates all framework packages simultaneously.

Development & Building

To run the documentation site locally:

npm install
npm run dev

To add or modify icons:

  1. Edit icons inside data/icon-data.json
  2. Run npm run build:packages to update all framework packages and CDN runtimes
  3. Run npm run build:full to rebuild the website with updated SEO meta tags

Open Source

Reicon is fully open-source under the MIT license. The entire codebase — icons, website, tooling — is available on GitHub. I welcome contributions of all kinds: new icons, design feedback, documentation improvements, and bug reports.

Contributing

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

Credits

Reicon base icons are built using elements from:

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

License

MIT License — Copyright © 2026 Dev Chauhan.

What's Next

I'm actively working on:

  • Icon variations — expanded filled, outlined, and duotone versions
  • Animation support — subtle micro-interactions for web use
  • Icon request system — vote on and suggest new icons
  • More framework adapters — expanding the ecosystem

Try It

You can start using Reicon today:

npm install reicon

Or explore the full collection at reicon.dev and browse 2,700+ icons, preview them live, copy SVG code, or download them as React components — all for free.

Built with care by Dev Chauhan. Follow development on GitHub or Twitter / X.