# Icons

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

- Skill: `majiayu000/icons` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/icons`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/icons/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/icons

---


# 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