Icons

Name: Icons
Author: majiayu000

ASecurity

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

666 stars
0 votes
0 copies
6 views
Added February 9, 2026

developmentgoreact

Security analysis

A100/100

Scanned February 12, 2026

npx -y skills add majiayu000/claude-skill-registry --skill icons --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Icons?

Add the live security badge to your README. It updates with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/majiayu000-icons/badge)](https://www.skillsdirectory.com/skills/majiayu000-icons)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

---
name: icons
description: Icon usage conventions and semantic mappings. Use when adding, modifying, or choosing 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