---

name: frontend-iconify description: 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. allowed-tools: Read, Edit, Write, Bash (*)

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

1. Search: curl "https://api.iconify.design/search?query=dashboard"
2. Select from results
3. Use via component or download SVG

API Quick Reference

Copy# 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

Integration Methods

React Component (Recommended)

Copynpm install @iconify/react

Copyimport { Icon } from '@iconify/react';

<Icon icon="lucide:home" width={24} />
<Icon icon="lucide:settings" className="w-5 h-5 text-primary" />

Download SVG

Copycurl -o ./public/icons/home.svg "https://api.iconify.design/lucide/home.svg"

Batch Download

CopyICONS="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

CopyNavigation:  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

Copy// Icon utility wrapper
function AppIcon({ name, ...props }) {
  return <Icon icon={`lucide:${name}`} {...props} />;
}

// Usage
<AppIcon name="home" className="w-5 h-5" />

Style Matching

Browser: https://icon-sets.iconify.design