Reicon

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

Website · Browse Icons · Usage 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-vue			Guide · Source
	reicon-svelte			Guide · Source
	reicon-figma	—	—	Guide · Source
	reicon-vscode		—	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>

  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.

  Star History

  License

MIT License - Copyright (c) 2026 Dev Chauhan.