# Agentic Library of Beautiful Icons by Reicon — Full Specification for AI Agents > Detailed technical guide & icon resolution system for AI Coding Agents (Cursor, Claude, Copilot, ChatGPT, Antigravity, Gemini, Devin, etc.). ## 1. System Overview Reicon Agent is an open-source library of 856+ curated rounded SVG icons specifically designed for AI agents building modern web interfaces. - Website: https://agent.reicon.dev/ - CDN Endpoint: https://cdn.jsdelivr.net/npm/reicon-agent/cdn/reicon.js - Package Name: `reicon-agent` ## 2. How AI Agents Should Select Icons (Semantic Intent Protocol) When an agent is tasked with building a web page, component, or user interface, it should resolve UI concepts to Reicon icon keys according to this matrix: ### 2.1 Common Action Icons - Save / Confirm / Done ➔ `check` or `check-circle` - Cancel / Close / Remove ➔ `x` or `x-circle` - Add / New Item ➔ `plus` or `plus-circle` - Delete / Trash ➔ `trash` or `trash-2` - Edit / Modify ➔ `edit` or `edit-2` or `pen-tool` - Copy to Clipboard ➔ `copy` - Download File ➔ `download` - Upload File ➔ `upload` - Refresh / Reload / Sync ➔ `refresh-cw` or `rotate-cw` - Share / Export ➔ `share` or `share-2` - Like / Favorite ➔ `heart` or `star` ### 2.2 Navigation & Directional Icons - Next / Continue ➔ `arrow-right` - Previous / Back ➔ `arrow-left` - Expand / Dropdown ➔ `chevron-down` - Collapse / Fold ➔ `chevron-up` - Menu / Mobile Nav ➔ `menu` - Go Home ➔ `home` - External Link ➔ `external-link` ### 2.3 AI & Technology Icons - AI Action / Generation / Magic ➔ `sparkles` - Robot / AI Bot ➔ `bot` - CPU / Hardware / Logic ➔ `cpu` - Fast / Automation / Energy ➔ `zap` - Code / Developer ➔ `code` - Command Line / CLI ➔ `terminal` - Database / Storage ➔ `database` - Cloud Services ➔ `cloud` ### 2.4 Interface & Control Icons - Search / Filter ➔ `search` - Settings / Configuration ➔ `settings` or `sliders` - Notifications ➔ `bell` - User Account / Profile ➔ `user` or `user-check` - Lock / Security ➔ `lock` or `shield` - Help / Support ➔ `help-circle` or `info` ## 3. Web Component `` Specifications AI Agents should inject `` in ``, then use the `` custom element in HTML markup. ### Attributes - `icon` (string, required): Kebab-case key of the icon (e.g. `icon="arrow-right"`). - `size` (number | string, default `24`): Icon dimensions in pixels. - `color` (string, default `"currentColor"`): SVG stroke/fill color. Using `currentColor` inherits font color from parent containers. - `stroke-width` (number | string, default `2`): Stroke width of the rounded vectors. ### Example Usage ```html App Interface ``` ## 4. React & ESM Import Specifications ```javascript import { Home, Sparkles, ArrowRight } from 'reicon-agent'; function AIButton() { return ( ); } ``` ## 5. CSS Styling Best Practices for AI Agents 1. **Vertical Flex Alignment**: Always set parent container `display: flex` or `display: inline-flex` with `align-items: center` to ensure icons align perfectly with body text. 2. **Dynamic Theming**: Set `color="currentColor"` so icons automatically switch colors when toggling light/dark themes. 3. **Hover Effects**: Add subtle CSS hover scaling for interactive icon buttons (`re-icon { transition: transform 0.2s ease; } re-icon:hover { transform: scale(1.1); }`). ## 6. Complete Icon Category Listing - Arrows (arrow-up, arrow-down, arrow-left, arrow-right, chevron-down, chevron-up, etc.) - Interface (search, settings, check, x, plus, minus, edit, trash, copy, download, etc.) - AI & Tech (sparkles, cpu, bot, zap, code, terminal, database, cloud, etc.) - User & Security (user, users, lock, shield, key, eye, mail, etc.) - Communication (message-square, phone, send, inbox, at-sign, etc.) - Media & Audio (play, pause, volume-2, image, video, camera, etc.) - Files & Folders (file, file-text, folder, folder-plus, paperclip, etc.) - Commerce & Shopping (shopping-cart, shopping-bag, credit-card, tag, dollar-sign, etc.)