Skip to main content Home Creators ajbcoding claude-skill-eval moai-icons-vector
moai-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.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/AJBcoding/claude-skill-eval --skill moai-icons-vectorThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository
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).
Related occupations SOC
Based on SOC occupation classification
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, ~30KBReact Icons (35K+): Multi-library support, modular bundlesTabler Icons (5900+): Dashboard optimized, ~22KBIonicons (1300+): Mobile + web compatibility
Specialist Libraries (300-800 icons) :
Heroicons (300+): Official Tailwind CSS iconsPhosphor (800+): 6 weights + duotone variationsMaterial Design (900+): Google design systemBootstrap Icons (2000+): Bootstrap ecosystem
Compact & Specialized :
Radix Icons (150+): Precise 15x15px, ~5KBSimple Icons (3300+): Brand logos onlyIconify (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 bundlesImport specific icons : Avoid import * patternsDynamic loading : Load icons on-demand for large setsIcon subsets : Create custom bundles per featureTree-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
