Skip to main contentmoai-icons-vector
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.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/AJBcoding/claude-skill-eval --skill moai-icons-vectorEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Más de este repositorio
Enterprise database architecture specialist with PostgreSQL 17, MySQL 8.4 LTS,
MongoDB 8.0, Redis 7.4 expertise. Master connection pooling, query optimization,
caching strategies, and database DevOps automation. Build scalable, resilient
database systems with comprehensive monitoring and disaster recovery.
Enterprise Frontend Development with AI-powered modern architecture, Context7 integration, and intelligent component orchestration for scalable user interfaces
Enterprise-grade security expertise with production-ready patterns for OWASP Top 10 2021, zero-trust architecture, threat modeling (STRIDE, PASTA), secure SDLC, DevSecOps automation, cloud security, cryptography, identity & access management, and compliance frameworks (SOC 2, ISO 27001, GDPR, CCPA).
Ocupaciones relacionadasSOC
Basado en la clasificación ocupacional SOC
Explorador de archivos
3 archivos| name | moai-icons-vector |
| version | 4.0.0 |
| status | stable |
| tier | domain |
| 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. |
| allowed-tools | Read, Bash, WebSearch, WebFetch, mcp__context7__resolve-library-id, mcp__context7__get-library-docs |
| primary-agent | frontend-expert |
| secondary-agents | ["ui-ux-expert","qa-validator","alfred"] |
| keywords | ["icons","vector icons","lucide","react icons","tabler icons","phosphor icons","heroicons","radix icons","iconify","svg icons","icon library","icon design system","accessibility"] |
| tags | ["domain-expert","enterprise"] |
| orchestration | null |
| can_resume | true |
| typical_chain_position | middle |
| depends_on | [] |
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
Level 1: Quick Reference
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)
Level 2: Practical Implementation
Core Library Patterns
Lucide React - General Purpose (1000+ icons)
import { Heart, Search, Settings, ChevronRight } from 'lucide-react'
export function LucideExample() {
return (
<div className="space-y-4">
{/* Basic usage (24px default) */}
<div className="flex items-center gap-2">
<Search />
<span>Search</span>
</div>
{/* Custom styling */}
<Heart size={32} color="#ff0000" fill="#ff0000" />
{/* Tailwind integration */}
<Settings className="w-6 h-6 text-gray-500 hover:text-gray-900" />
{/* Icon button */}
<button className="p-2 rounded-lg hover:bg-gray-100">
<ChevronRight size={20} />
</button>
</div>
)
}
React Icons - Multi-Library (35K+ icons)
import { FaHome } from "react-icons/fa"
import { MdHome } from "react-icons/md"
import { BsHouse } from "react-icons/bs"
import { FiHome } from "react-icons/fi"
import { SiReact } from "react-icons/si"
export function MultiLibraryExample() {
return (
<div className="flex gap-4">
<FaHome size={32} className="text-blue-600" />
<MdHome size={32} className="text-green-600" />
<BsHouse size={32} className="text-purple-600" />
<FiHome size={32} className="text-orange-600" />
<SiReact size={32} className="text-cyan-500" />
</div>
)
}
Phosphor Icons - Weight Variations (800+ icons)
import { Heart, Star } from "@phosphor-icons/react"
export function PhosphorExample() {
const [rating, setRating] = React.useState(3)
return (
<div className="space-y-4">
{/* Weight variations */}
<div className="flex gap-2">
<Heart weight="thin" />
<Heart weight="light" />
<Heart weight="regular" />
<Heart weight="bold" />
<Heart weight="fill" />
</div>
{/* Interactive rating */}
<div className="flex gap-1">
{[1, 2, 3, 4, 5].map((star) => (
<button key={star}>
<Star
weight={star <= rating ? "fill" : "regular"}
size={24}
color={star <= rating ? "#fbbf24" : "#d1d5db"}
/>
</button>
))}
</div>
</div>
)
}
Iconify - Universal Framework (200K+ icons)
import { Icon } from "@iconify/react"
export function IconifyExample() {
return (
<div className="space-y-4">
{/* String-based (CDN loaded) */}
<Icon icon="fa:home" width="32" height="32" />
<Icon icon="mdi:account" width="32" height="32" />
<Icon icon="bi:house" width="32" height="32" />
{/* Custom styling */}
<Icon
icon="heroicons:heart"
width="48"
height="48"
style={{ color: "#ef4444" }}
/>
</div>
)
}
Type-Safe Icon Button
import { FC, SVGProps } from 'react'
type IconType = FC<SVGProps<SVGSVGElement>>
interface IconButtonProps {
icon: IconType
label: string
variant?: 'primary' | 'secondary' | 'ghost'
size?: 'sm' | 'md' | 'lg'
onClick?: () => void
}
const sizeMap = {
sm: 'w-4 h-4',
md: 'w-5 h-5',
lg: 'w-6 h-6',
}
const variantMap = {
primary: 'bg-blue-500 text-white hover:bg-blue-600',
secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
ghost: 'text-gray-600 hover:text-gray-900 hover:bg-gray-100',
}
export function IconButton({
icon: Icon,
label,
variant = 'ghost',
size = 'md',
onClick,
}: IconButtonProps) {
return (
<button
onClick={onClick}
aria-label={label}
title={label}
className={`
p-2 rounded-lg transition-all
${variantMap[variant]}
`}
>
<Icon className={sizeMap[size]} />
</button>
)
}
Level 3: Advanced Integration
Custom Icon Component
import { forwardRef, SVGProps } from 'react'
interface CustomIconProps extends SVGProps<SVGSVGElement> {
isActive?: boolean
tooltip?: string
}
export const CustomIcon = forwardRef<SVGSVGElement, CustomIconProps>(
({ isActive, tooltip, className = '', ...props }, ref) => (
<svg
ref={ref}
viewBox="0 0 24 24"
width="24"
height="24"
className={`
${isActive ? 'text-blue-500' : 'text-gray-400'}
${tooltip ? 'cursor-help' : ''}
${className}
transition-colors duration-200
`}
title={tooltip}
{...props}
>
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" />
</svg>
)
)
Icon Theme System
import { Heart, Settings } from 'lucide-react'
type IconTheme = 'light' | 'dark' | 'accent'
interface IconThemeConfig {
color: string
strokeWidth: number
opacity: number
}
const themeConfig: Record<IconTheme, IconThemeConfig> = {
light: { color: '#e5e7eb', strokeWidth: 2, opacity: 1 },
dark: { color: '#1f2937', strokeWidth: 2, opacity: 1 },
accent: { color: '#0ea5e9', strokeWidth: 2.5, opacity: 1 },
}
export function ThemedIcon({ theme, size = 24 }: { theme: IconTheme; size?: number }) {
const config = themeConfig[theme]
return (
<div className="flex gap-4">
<Heart size={size} color={config.color} strokeWidth={config.strokeWidth} />
<Settings size={size} color={config.color} strokeWidth={config.strokeWidth} />
</div>
)
}
Icon Animation
import { Heart } from 'lucide-react'
import { useState } from 'react'
export function AnimatedIcon() {
const [isActive, setIsActive] = useState(false)
return (
<button onClick={() => setIsActive(!isActive)} className="p-4">
<Heart
size={32}
className={`
text-red-500 transition-all duration-300
${isActive ? 'scale-125 animate-pulse' : 'scale-100'}
`}
fill={isActive ? '#ff0000' : 'none'}
/>
</button>
)
}
Performance & Best Practices
Performance Optimization
import { Heart, Star } from 'lucide-react'
import * as Icons from 'lucide-react'
const Icon = Icons[iconName]
const LazyIcon = React.lazy(() => import('lucide-react').then(module => ({
default: module[iconName]
})))
const MemoHeart = React.memo(Heart)
Bundle Optimization Strategies
- Choose right library size: Use Radix Icons for minimal bundles
- Import specific icons: Avoid
import * patterns
- Dynamic loading: Load icons on-demand for large sets
- Icon subsets: Create custom bundles per feature
- Tree-shaking: Use ES modules and bundler optimization
Accessibility Essentials
- ✅ Use
aria-label for icon-only buttons
- ✅ Ensure 4.5:1 color contrast ratio
- ✅ Support high contrast mode with
currentColor
- ✅ Don't rely on color alone for meaning
- ✅ Use semantic HTML structure
- ✅ Test with screen readers
Library Comparison Summary
| Library | Icons | Bundle Size | Best For |
|---|
| Lucide | 1000+ | ~30KB | General purpose UI |
| Heroicons | 300+ | ~10KB | Tailwind CSS projects |
| Phosphor | 800+ | ~25KB | Weight flexibility needed |
| Tabler | 5900+ | ~22KB | Dashboard applications |
| Radix | 150+ | ~5KB | Minimal bundle size |
| React Icons | 35K+ | Modular | Multi-library support |
| Iconify | 200K+ | CDN | Maximum icon variety |
Quick Installation Commands
npm install lucide-react
npm install @heroicons/react
npm install @phosphor-icons/react
npm install @tabler/icons-react
npm install @radix-ui/react-icons
npm install react-icons
npm install @iconify/react
npm install simple-icons
Version: 4.0.0 Enterprise
Last Updated: 2025-11-13
Status: Production Ready
Enterprise Grade: ✅ Full Enterprise Support
