Maps concepts to icons from Lucide, Heroicons, or Phosphor. Supplies React/HTML templates, Tailwind sizing, consistency rules, and tree-shaking for web UIs.
From evolv3ainpx claudepluginhub evolv3ai/claude-skills-archive --plugin projectThis skill uses the workspace's default tool permissions.
README.mdagents/icon-selector.mdreferences/icon-templates.mdreferences/library-comparison.mdreferences/migration-guide.mdreferences/semantic-mapping.mdrules/icon-design.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Executes pre-written implementation plans: critically reviews, follows bite-sized steps exactly, runs verifications, tracks progress with checkpoints, uses git worktrees, stops on blockers.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
Select the right icon for the job. Maps concepts to icons, provides templates, prevents common mistakes.
| Concept | Lucide | Heroicons | Phosphor |
|---|---|---|---|
| Award/Quality | Trophy | trophy | Trophy |
| Price/Value | Tag | tag | Tag |
| Location | MapPin | map-pin | MapPin |
| Expertise | GraduationCap | academic-cap | GraduationCap |
| Support | MessageCircle | chat-bubble-left-right | ChatCircle |
| Security | Shield | shield-check | Shield |
| Speed | Zap | bolt | Lightning |
| Phone | Phone | phone | Phone |
Mail | envelope | Envelope | |
| User/Profile | User | user | User |
| Team | Users | user-group | Users |
| Settings | Settings | cog-6-tooth | Gear |
| Home | Home | home | House |
| Search | Search | magnifying-glass | MagnifyingGlass |
| Check/Success | Check | check | Check |
| Close/Cancel | X | x-mark | X |
| Menu | Menu | bars-3 | List |
| Calendar | Calendar | calendar | Calendar |
| Clock/Time | Clock | clock | Clock |
| Heart/Favourite | Heart | heart | Heart |
| Library | Best For | Package |
|---|---|---|
| Lucide | General use, React projects | lucide-react |
| Heroicons | Tailwind projects, minimal style | @heroicons/react |
| Phosphor | Weight variations needed | @phosphor-icons/react |
Default recommendation: Lucide (1,400+ icons, excellent React integration)
See references/library-comparison.md for detailed comparison.
| Context | Tailwind Class | Pixels |
|---|---|---|
| Inline with text | w-4 h-4 or w-5 h-5 | 16-20px |
| Feature cards | w-8 h-8 | 32px |
| Hero sections | w-10 h-10 or w-12 h-12 | 40-48px |
| Large decorative | w-16 h-16 | 64px |
stroke="currentColor"text-primary, not text-blue-500Dynamic icon selection breaks tree-shaking. Use explicit maps:
// BAD - all icons bundled
import * as Icons from 'lucide-react'
const Icon = Icons[iconName] // Tree-shaken away!
// GOOD - explicit map
import { Home, Users, Settings, type LucideIcon } from 'lucide-react'
const ICON_MAP: Record<string, LucideIcon> = { Home, Users, Settings }
const Icon = ICON_MAP[iconName]
references/semantic-mapping.mdreferences/icon-templates.mdWhen unsure which icon:
Is it about recognition/awards? → Trophy, Star, Award
Is it about money/price? → Tag, DollarSign, CreditCard
Is it about location? → MapPin, Globe, Map
Is it about people/team? → Users, UserGroup, User
Is it about communication? → MessageCircle, Phone, Mail
Is it about safety/trust? → Shield, Lock, ShieldCheck
Is it about speed/time? → Zap, Clock, Timer
Is it trade-specific? → Check semantic-mapping.md
Still unsure? → CheckCircle (generic positive) or Sparkles (generic feature)
references/semantic-mapping.md - Full concept→icon tables by categoryreferences/icon-templates.md - React/HTML patterns with Tailwindreferences/library-comparison.md - Lucide vs Heroicons vs Phosphorreferences/migration-guide.md - FA/Material → modern equivalentsrules/icon-design.md - Correction rules for projects