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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/AJBcoding/claude-skill-eval --skill moai-icons-vector명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
| 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
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).
