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

•

デザインツール

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.

主な機能

Provides intelligent icon recommendations based on project style (Modern, Enterprise, Playful)
Automates batch icon processing and local asset organization via CLI
3 GitHub stars
Accesses 200,000+ open-source icons via the Iconify API
Standardized sourcing strategy for avatars, photos, and illustrations
Supports direct SVG downloads and React component integration

ユースケース

Automating the download and organization of SVG assets for a frontend project to reduce bundle size
Rapidly populating a UI prototype with consistent icons and placeholder imagery
Integrating specific icon sets like Lucide or Tabler into a React application with standardized wrappers

概要

主な機能

Provides intelligent icon recommendations based on project style (Modern, Enterprise, Playful)
Automates batch icon processing and local asset organization via CLI
3 GitHub stars
Accesses 200,000+ open-source icons via the Iconify API
Standardized sourcing strategy for avatars, photos, and illustrations
Supports direct SVG downloads and React component integration

ユースケース

Automating the download and organization of SVG assets for a frontend project to reduce bundle size
Rapidly populating a UI prototype with consistent icons and placeholder imagery
Integrating specific icon sets like Lucide or Tabler into a React application with standardized wrappers