icons
Icon usage conventions and semantic mappings. Use when adding, modifying, or choosing icons.
Installation
Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.
View source ↗GuidesSkill instructions
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
- Use standard icon for each concept (no alternatives)
- Size:
16-18pxinline,20-24pxstandalone - Check this doc before adding new icons
Examples
Read the usage examples in the source repository.
View source ↗Source history
- Indexed on
- 2026-01-20
- Index updated
- 2026-01-30
- Branch
- main
Index and sync dates describe this directory. View the source repository for code history.
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!