moai-icons-vector

Name: moai-icons-vector
Availability: InStock
Author: ajbcoding

Compare vector icon libraries and generate decision matrices for React frontends.

4|1|Updated Nov 18, 2025

Search Tags:#icons #iconify #lucide #react-icons #vector-icons

Ready to run

npx skills add https://github.com/AJBcoding/claude-skill-eval --skill moai-icons-vector

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: moai-icons-vector
Source: https://github.com/AJBcoding/claude-skill-eval/tree/main/skills/moai-icons-vector
Command: npx skills add https://github.com/AJBcoding/claude-skill-eval --skill moai-icons-vector

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

A comprehensive guide to vector icon libraries with implementation patterns for UI.

Core Features & Use Cases

✅ Library selection guidance (Lucide, React Icons, Tabler, Heroicons, Phosphor, Iconify)
✅ Bundle size and treeshaking considerations
✅ API usage patterns for multiple frameworks
✅ Accessibility and theming patterns

Quick Start

Compare two icon libraries and generate a decision matrix for a dashboard UI.

Frequently Asked Questions about moai-icons-vector

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I choose the right icon library for a React application?▼

Select icon libraries based on bundle size, tree-shaking support, and design-system fit. Lucide, React Icons, Heroicons, and Iconify each offer different trade-offs: Lucide prioritizes minimal bundles, React Icons provides broad coverage, Heroicons enforces consistency, and Iconify enables dynamic loading without build overhead.

What's the best way to implement icons with tree-shaking in enterprise frontends?▼

Use modular imports from libraries supporting tree-shaking—Lucide and React Icons both optimize this. Import only needed icons by name rather than the entire library, and configure your bundler to eliminate unused code, reducing final bundle size significantly.

How do I make vector icons accessible in my UI components?▼

Vector icons require semantic HTML and ARIA labels. Wrap icons with descriptive alt text or aria-label attributes, use title elements for tooltips, and ensure icon-only buttons include accessible labels so screen readers convey intent without relying on visual recognition.

Can I use the same icon library across React and other web frameworks?▼

Framework compatibility varies by library. React Icons and Lucide are React-specific; Iconify and Tabler work across frameworks through web components or framework-agnostic APIs. Heroicons offers both Vue and React implementations, enabling multi-framework consistency.

Why does bundle size matter when selecting icon libraries?▼

Icon libraries add kilobytes to your bundle, impacting load time and performance metrics. Tree-shaking removes unused icons, but dynamic loading or selective imports further optimize for enterprise applications where every kilobyte affects user experience across high-traffic UIs.