AI Summary1. Choose right library size: Use Radix Icons for minimal bundles 2. Import specific icons: Avoid patterns 3. Dynamic loading: Load icons on-demand for large sets
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "moai-icons-vector" skill in my project. Please run this command in my terminal: # Install skill into your project (2 files) mkdir -p .claude/skills/moai-icons-vector && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/moai-icons-vector/SKILL.md "https://raw.githubusercontent.com/majiayu000/claude-skill-registry/main/skills/data/moai-icons-vector/SKILL.md" && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/moai-icons-vector/metadata.json "https://raw.githubusercontent.com/majiayu000/claude-skill-registry/main/skills/data/moai-icons-vector/metadata.json" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Vector icon libraries ecosystem guide covering 10+ major libraries with 200K+ icons, including React Icons (35K+), Lucide (1000+), Tabler Icons (5900+), Iconify (200K+), Heroicons, Phosphor, and Radix Icons with implementation patterns, decision trees, and best practices.
moai-icons-vector
Vector Icon Libraries: Enterprise Guide (10+ Libraries, 200K+ Icons) > Primary Agent: frontend-expert > Secondary Agent: ui-ux-expert > Version: 4.0.0 (Lucide v0.4+, React Icons 35K+, Tabler v2.0+, Phosphor v1.4+) > Keywords: icons, vector icons, lucide, react icons, iconify, svg icons, accessibility
Library Selection Guide
Ecosystem Leaders (1000+ icons): • Lucide (1000+): General UI, modern design, ~30KB • React Icons (35K+): Multi-library support, modular bundles • Tabler Icons (5900+): Dashboard optimized, ~22KB • Ionicons (1300+): Mobile + web compatibility Specialist Libraries (300-800 icons): • Heroicons (300+): Official Tailwind CSS icons • Phosphor (800+): 6 weights + duotone variations • Material Design (900+): Google design system • Bootstrap Icons (2000+): Bootstrap ecosystem Compact & Specialized: • Radix Icons (150+): Precise 15x15px, ~5KB • Simple Icons (3300+): Brand logos only • Iconify (200K+): Universal framework, CDN-based
Quick Decision Matrix
| Scenario | Best Choice | Why | |----------|-------------|-----| | Want maximum icons | Iconify | 200K+ icons from 150+ sets | | Dashboard application | Tabler Icons | 5900 optimized icons, 24px | | Tailwind CSS project | Heroicons | Official integration | | Flexible styling needed | Phosphor | 6 weights + duotone | | Minimal bundle size | Radix Icons | 5KB, precise 15x15px | | Brand logos | Simple Icons | 3300+ company logos | | General purpose UI | Lucide | 1000+ modern, well-designed |
Bundle Size Comparison
` Radix Icons: ~5KB (150 icons) Heroicons: ~10KB (300 icons) Tabler Icons: ~22KB (5900 icons) Ionicons: ~25KB (1300 icons) Phosphor: ~25KB (800 icons with weights) Lucide: ~30KB (1000 icons) Simple Icons: ~50KB (3300+ brand icons) React Icons: Modular (varies by library) `
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster