Agent skill

icons

Icon usage conventions and semantic mappings. Use when adding, modifying, or choosing icons.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/icons

SKILL.md

Icon Standards

Libraries

  • Radix (@radix-ui/react-icons): UI primitives (dropdowns, modals, tables)
  • react-icons: Domain icons (status, features)

Standard Icons

Concept Icon Import
Error MdError react-icons/md
Warning IoWarningOutline react-icons/io5
Success GrStatusGood react-icons/gr
Info FaRegLightbulb react-icons/fa
Help BsQuestionCircle react-icons/bs
Close Cross2Icon @radix-ui/react-icons
Search FiSearch react-icons/fi
External link ExternalLinkIcon @radix-ui/react-icons
Settings GearIcon @radix-ui/react-icons
Copy LuCopy react-icons/lu
Trash TrashIcon @radix-ui/react-icons
Chevrons ChevronDownIcon etc @radix-ui/react-icons
Arrows ArrowDownIcon etc @radix-ui/react-icons
Filter GoFilter react-icons/go
Star GoStar / GoStarFill react-icons/go
User LuUser react-icons/lu
Reload ReloadIcon @radix-ui/react-icons

Domain Icons

Concept Icon Import
Supply BsArrowUpCircle react-icons/bs
Deposit BsArrowUpCircle react-icons/bs
Borrow BsArrowDownLeftCircle react-icons/bs
Repay BsArrowUpRightCircle react-icons/bs
Withdraw BsArrowDownCircle react-icons/bs
Swap LuArrowRightLeft react-icons/lu
History GoHistory react-icons/go
Rewards FiGift react-icons/fi
Fire HiFire react-icons/hi2
Morpho PiButterflyDuotone react-icons/pi

Custom Components

Component Path
SpinnerIcon @/components/icons/SpinnerIcon
RefetchIcon @/components/ui/refetch-icon
TokenIcon @/components/shared/token-icon
NetworkIcon @/components/shared/network-icon

Rules

  1. Use standard icon for each concept (no alternatives)
  2. Size: 16-18px inline, 20-24px standalone
  3. Check this doc before adding new icons

Didn't find tool you were looking for?

Be as detailed as possible for better results