skills.rest
petbrains
petbrainsOFFICIAL
Explore all skills by this author →
GitHub

frontend-iconify

Search an icon API by concept and download SVGs for React components.

13|2|Updated Aug 9, 2025
Search Tags:#automation#search#assets#icons#svg#ui-design#iconify
One-click install
npx skills add https://github.com/petbrains/mvp-builder --skill frontend-iconify
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-iconify
Source: https://github.com/petbrains/mvp-builder/tree/main/.claude/skills/frontend-iconify
Command: npx skills add https://github.com/petbrains/mvp-builder --skill frontend-iconify

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solves?

This Skill eliminates the tedious process of searching for, downloading, and integrating icons by providing instant access to 200,000+ open-source icons through a unified API with search by concept and automatic SVG optimization.

Core Features & Use Cases

  • Concept-Based Search: Find icons by description ("dashboard", "settings", "user") rather than exact names.
  • Multiple Integration Methods: Use React components, download SVGs directly, or batch download entire icon sets.
  • Use Case: Imagine needing a complete icon set for a new dashboard. This Skill lets you search for "navigation", "actions", and "status" icons, then provides the exact Lucide or Heroicons names and integration code—saving hours of icon hunting.

Quick Start

Use the frontend-iconify skill to find and integrate a set of navigation icons (home, settings, user, search) from the Lucide icon set into a React component.

Frequently Asked Questions about frontend-iconify

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I search for and integrate icons into a React component?▼

Search for icons by concept using the Iconify API—for example, "dashboard" or "settings"—then integrate results directly into React components or download SVGs with optional color parameters for instant UI implementation.

Can I download SVGs in bulk from an icon library?▼

Yes, batch download entire icon sets or individual SVGs from 200,000+ open-source icons through the unified API, with automatic optimization and direct access to Lucide and Heroicons collections.

What's the best way to source icons for a dashboard UI without manual hunting?▼

Use concept-based search to find navigation, action, and status icons by description rather than exact names, then retrieve integration code or SVG files ready to embed in your web interface.

Does Iconify work with web interfaces beyond React?▼

Yes, the API supports multiple integration methods: React components, direct SVG downloads with color parameters, and batch scripts for any web interface or framework.

How do I customize icon colors when downloading SVGs?▼

The API provides optional color parameters when retrieving SVGs, allowing you to download icons with custom colors applied directly during the export process.

Related Skills

Explore More Design & Creative Skills→
AIA-11-HN-MIBAIA-11-HN-MIB
1

remix-icon

Provide 3,100+ RemixIcon icons in line and fill variants for web and mobile UI.

Official
Intermediate
gkswls5006-webgkswls5006-web

moai-tool-svg

Automate SVG creation, optimization, and transformation workflows with SVGO.

Community
Advanced
fellipeutakafellipeutaka
12

denji

Convert Iconify SVG icons into framework-specific typed components.

Community
Intermediate
smallnestsmallnest
207

article-icons

Embed semantically matched inline SVG icons into Markdown, HTML, and MDX articles.

Community
Intermediate