What icon sets are supported by Frontend Iconify?

It supports over 100 popular open-source sets including Lucide, Heroicons, Phosphor, Tabler, and Simple Icons for brand logos.

Can I use this skill to download icons locally?

Yes, the skill includes automated bash commands to download individual SVGs or batch download sets directly into your project's public folder.

How do I integrate these icons into a React project?

The skill provides patterns for using the @iconify/react package and creating reusable utility wrappers for consistent styling.

Can I customize the color and size of the icons?

Absolutely. The API reference included shows how to pass color and dimension parameters to the Iconify API to receive customized SVGs.

Does this skill help with assets other than icons?

Yes, it provides a sourcing strategy for avatars (DiceBear), photos (Unsplash), illustrations (unDraw), and backgrounds (Haikei).

Frontend Iconify

Name: Frontend Iconify
Author: akhmat-s

byakhmat-s

デザインツール

Streamlines UI asset sourcing by providing instant access to over 200,000 open-source icons and standardized integration patterns.

概要

Frontend Iconify is a specialized skill for Claude Code designed to optimize the way developers find and implement visual assets. It provides a structured workflow for searching, selecting, and integrating icons from over 100 popular sets like Lucide and Heroicons using the Iconify API. Beyond icons, it establishes a 'free-first' asset strategy, guiding developers toward specific resources for avatars, photos, and illustrations before resorting to AI generation, ensuring production-grade UI design with minimal overhead.

主な機能

React component integration patterns for seamless UI development
Automated SVG downloading and batch processing scripts
0 GitHub stars
Semantic search for 200,000+ icons across multiple open-source sets
Standardized sourcing strategy for avatars, backgrounds, and illustrations
Curated recommendations for icons based on project style (Modern, Enterprise, Playful)

ユースケース

Automating the local management of SVG assets to reduce external dependencies
Quickly populating a new frontend project with consistent, high-quality iconography
Implementing dynamic icon systems in React or Tailwind CSS applications

概要

主な機能

React component integration patterns for seamless UI development
Automated SVG downloading and batch processing scripts
0 GitHub stars
Semantic search for 200,000+ icons across multiple open-source sets
Standardized sourcing strategy for avatars, backgrounds, and illustrations
Curated recommendations for icons based on project style (Modern, Enterprise, Playful)

ユースケース

Automating the local management of SVG assets to reduce external dependencies
Quickly populating a new frontend project with consistent, high-quality iconography
Implementing dynamic icon systems in React or Tailwind CSS applications