Claude Code Plugins

Community-maintained marketplace

Feedback

frontend-iconify

@petbrains/mvp-builder
4
0

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 Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

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

# 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