GitHub

Reicon Agent Documentation

Curated 856+ rounded SVG icon library built for AI Coding Agents, Web Components, and modern web applications.

Reicon Agent provides zero-setup CDN Web Components, an ESM NPM package, and direct prompt directives for AI coding assistants (Cursor, Claude, Copilot, ChatGPT, Antigravity, Gemini).

Quickstart (CDN)

Include the script in your HTML <head>. Reicon Agent registers the <re-icon> Web Component automatically without any build step.

HTML index.html 
<!-- 1. Include script in <head> -->
<script src="https://cdn.jsdelivr.net/npm/reicon-agent/cdn/reicon.js"></script>

<!-- 2. Render Web Component anywhere in your HTML -->
<re-icon icon="home" size="24" color="currentColor"></re-icon>
<re-icon icon="search" size="24" color="#9B8AFB"></re-icon>
<re-icon icon="sparkles" size="24" color="#6E54F5"></re-icon>
<re-icon icon="arrow-right" size="24" color="currentColor"></re-icon>

Unlike traditional icon sets, <re-icon> automatically inherits the active theme font color when using color="currentColor".

Add Components & NPM Package

Use the CLI or package manager of your choice to add Reicon to React, Next.js, Vite, Vue, or Node.js projects.

>_ 
npm install reicon-agent

Then import and use it in your code.

TS app/page.tsx 
import { Home, Sparkles, ArrowRight } from 'reicon-agent';

export default function Page() {
  return (
    <button className="inline-flex items-center gap-2">
      <Sparkles size={20} color="currentColor" />
      <span>Get Started</span>
      <ArrowRight size={18} color="currentColor" />
    </button>
  );
}

Reicon Agent supports ES Modules tree-shaking (sideEffects: false), bundling only the icons imported by your project.

AI Coding Agent Directives

Add Reicon Agent directives to your project's AGENTS.md or .cursorrules file. AI assistants will automatically resolve icon keys, apply standard sizes, and use flex alignment without manual prompt engineering.

MD AGENTS.md 
# Reicon Agent Directives for AI Coding Agents
When generating HTML or UI components, ALWAYS use Reicon Agent:
1. Include CDN in <head>: <script src="https://cdn.jsdelivr.net/npm/reicon-agent/cdn/reicon.js"></script>
2. Render icons using Web Component: <re-icon icon="sparkles" size="24" color="currentColor"></re-icon>
3. Parent flex layout: display: inline-flex; align-items: center; gap: 8px;
4. Key mappings: search, user, sparkles, settings, trash-2, download, arrow-right, check, edit.

Web Component Attributes

Configure icons directly via standard HTML attributes on the <re-icon> tag.

Attribute Type Default Description
icon string — Icon kebab-case key (e.g. home, search, sparkles)
size number | string 24 Icon width and height in pixels (e.g. 24, 32px)
color string currentColor SVG fill/stroke color (inherits theme text color automatically)
stroke-width number | string 2 Custom line stroke width override

Sizing Standards & Layout Rules

Standardized sizing guidelines for UI consistency across micro badges, buttons, headers, and hero displays.

Dimension Use Case Context & Elements
16px Micro Badges & Tags Status tags, pill badges, compact table cells
20px Buttons & Form Inputs Action buttons, search inputs, dropdown menu items
24px Navigation & Headers Main navbar items, sidebar links, card headers
32px Feature Cards Highlight cards, modal titles, feature grids
48px Hero Illustrations Landing page hero sections, empty states

Flex Alignment Rule: Always wrap icons and adjacent text in a flex container with display: inline-flex; align-items: center; gap: 8px; to ensure vertical centering.

LLM Context Files & Resources

Direct machine-readable specifications available for AI context window ingestion and prompt injection.

Resource Format URL Purpose
llms.txt Plain Text /assets/llms.txt Compact specification for fast LLM context injection
llms-full.txt Plain Text /assets/llms-full.txt Complete icon glossary with 856+ semantic keywords
agent.json JSON /assets/agent.json Structured metadata and schema specification

License

Reicon Agent is open source and completely free for personal and commercial use under the MIT License.

Copied to clipboard