What is the Frontend Iconify skill for Claude Code?

It is a specialized capability that allows Claude to search for, download, and integrate icons and images into your frontend projects using various free APIs and libraries.

Can it help with images other than icons?

Yes, it provides a strategy for sourcing avatars via DiceBear, stock photos via Unsplash, and illustrations via unDraw or Storyset.

Does it support local SVG storage?

Yes, it includes commands to batch download SVGs directly into your project's public or assets folder using curl.

Which icon sets are supported?

It supports over 200,000 icons from popular sets including Lucide, Heroicons, Phosphor, Tabler, and Simple Icons.

How does it integrate with React projects?

The skill provides patterns for installing @iconify/react and creating utility wrappers for dynamic icon rendering.

Frontend Icon & Image Sourcing

Name: Frontend Icon & Image Sourcing
Author: petbrains

bypetbrains

•

Design Tools

Streamlines UI asset management by sourcing free images, avatars, and over 200,000 open-source icons directly into frontend projects.

This skill empowers Claude to efficiently handle visual asset procurement for web projects through a structured, multi-source strategy. It provides immediate access to over 200,000 icons via the Iconify API, alongside a prioritized workflow for sourcing free avatars from DiceBear, photos from Unsplash, and illustrations from Storyset. By automating the search, selection, and integration of SVGs and React components, this skill helps developers maintain visual consistency and high design standards during rapid prototyping and MVP development without manual asset hunting.

Key Features

01Provides intelligent icon recommendations based on project style (Modern, Enterprise, Playful)

02Automates batch icon processing and local asset organization via CLI

033 GitHub stars

04Accesses 200,000+ open-source icons via the Iconify API

05Standardized sourcing strategy for avatars, photos, and illustrations

06Supports direct SVG downloads and React component integration

Use Cases

01Automating the download and organization of SVG assets for a frontend project to reduce bundle size

02Rapidly populating a UI prototype with consistent icons and placeholder imagery

03Integrating specific icon sets like Lucide or Tabler into a React application with standardized wrappers

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add petbrains/mvp-builder frontend-iconify

For use in Claude.ai and ChatGPT

Download Skill