# Agentic Library of Beautiful Icons by Reicon > Official 856+ curated rounded SVG icon library built for AI Coding Agents (Cursor, Claude, Copilot, ChatGPT, Antigravity) & modern web developers. ## How Agentic Icon Selection & Integration Works When generating UI code, AI agents automatically select, render, and style Reicon icons using zero-setup CDN Web Components or NPM ESM modules. ### CDN Quickstart Include script in HTML ``: ```html ``` Render any icon anywhere in your HTML: ```html

``` ### NPM Installation ```bash npm install reicon-agent ``` Import in JavaScript / React / Frameworks: ```javascript import { Home, Search, ArrowRight } from 'reicon-agent'; ``` ## Icon Styling Rules for AI Agents 1. **Size Standards**: - `16`: Micro badges, inline status tags. - `20`: Buttons, form inputs, compact lists. - `24`: Default UI navigation, headers, action buttons. - `32`: Card headers, hero features, highlighted actions. - `48`: Empty states, landing page hero illustrations. 2. **Coloring Strategy**: - `color="currentColor"` (Recommended): Inherits parent element CSS font color automatically. Perfect for dark mode, hover states, and theme switching. - Custom hex/hsl: `color="#9B8AFB"` or CSS variables `color="var(--accent)"`. 3. **Flex Layout Alignment**: ```html ``` CSS: `.btn { display: inline-flex; align-items: center; gap: 8px; }` 4. **Animations & Interactive States**: - Loading state: Add CSS spin animation `re-icon[icon="loader"] { animation: spin 1s linear infinite; }` - Hover scaling: `re-icon:hover { transform: scale(1.1); transition: transform 0.2s ease; }` ## Semantic Icon Map Matrix - **Actions**: `check`, `x`, `plus`, `minus`, `edit`, `trash-2`, `copy`, `download`, `share`, `filter`, `refresh` - **Navigation**: `arrow-right`, `arrow-left`, `chevron-down`, `menu`, `home`, `external-link` - **AI & Tech**: `sparkles`, `cpu`, `bot`, `zap`, `code`, `terminal`, `database`, `cloud` - **User & Security**: `user`, `users`, `lock`, `shield`, `key`, `eye`, `mail` - **Interface & Controls**: `search`, `settings`, `bell`, `calendar`, `clock`, `info`, `help-circle` ## Links & Resources - Website: https://agent.reicon.dev/ - Full Agent Specifications: https://agent.reicon.dev/llms-full.txt - Documentation: https://agent.reicon.dev/docs/ - GitHub: https://github.com/dqev/reicon-agent - License: MIT