ReddRadar
Agent skill
frontend-iconify
Image sourcing strategy for UI projects. Use FREE resources first - DiceBear/Boring Avatars for avatars, Unsplash/Picsum for photos, unDraw/Storyset for illustrations, Haikei for backgrounds. AI generation (DALL-E) only when custom branded assets needed and no free alternative exists.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/frontend-iconify
SKILL.md
Iconify
200,000+ open-source icons through single API. Search by concept, use any icon set.
When to Use
- Find icon by concept ("dashboard", "settings")
- Need icons from specific set (Lucide, Heroicons)
- Download SVGs for project
- Dynamic icon component
Process
SEARCH → SELECT → INTEGRATE
- Search:
curl "https://api.iconify.design/search?query=dashboard" - Select from results
- Use via component or download SVG
API Quick Reference
# Search icons
curl "https://api.iconify.design/search?query=home&limit=10"
# Get SVG directly
curl "https://api.iconify.design/lucide/home.svg"
# With custom color (URL-encode #)
curl "https://api.iconify.design/lucide/home.svg?color=%236366f1"
Recommended Sets
| Set | Prefix | Style | Best For |
|---|---|---|---|
| Lucide | lucide |
Outline 24px | Default, shadcn |
| Heroicons | heroicons |
Outline+Solid | Tailwind |
| Phosphor | ph |
6 weights | Weight variants |
| Tabler | tabler |
Outline 24px | Large variety |
| Simple Icons | simple-icons |
Logos | Brand logos |
Integration Methods
React Component (Recommended)
npm install @iconify/react
import { Icon } from '@iconify/react';
<Icon icon="lucide:home" width={24} />
<Icon icon="lucide:settings" className="w-5 h-5 text-primary" />
Download SVG
curl -o ./public/icons/home.svg "https://api.iconify.design/lucide/home.svg"
Batch Download
ICONS="home settings user search menu"
for icon in $ICONS; do
curl -o "./public/icons/$icon.svg" "https://api.iconify.design/lucide/$icon.svg"
done
Common Icon Names
Navigation: home, menu, x, chevron-right, arrow-right, search
Actions: plus, minus, check, edit, trash-2, copy, download
Objects: file, folder, image, calendar, mail, link
Users: user, users, bell, lock, key, shield
Media: play, pause, volume-2, camera, mic
Data: bar-chart, trending-up, database, server
Status: check-circle, x-circle, alert-triangle, info
Quick Pattern
// Icon utility wrapper
function AppIcon({ name, ...props }) {
return <Icon icon={`lucide:${name}`} {...props} />;
}
// Usage
<AppIcon name="home" className="w-5 h-5" />
Style Matching
| Project Style | Recommended |
|---|---|
| Modern/Clean | Lucide, Feather |
| Enterprise | Heroicons, Material |
| Playful | Phosphor (fill) |
| Brand logos | Simple Icons |
Browser: https://icon-sets.iconify.design
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?