skills.rest
michaelkd01
michaelkd01COMMUNITY
Explore all skills by this author →
GitHub

icon-sources

Standardize frontend icon selection using Iconify and Flaticon API assets.

Updated Aug 23, 2026
Search Tags:#frontend#svg#claude-code#iconify#design-consistency#flaticon#css-masks
One-click install
npx skills add https://github.com/michaelkd01/dic-skills --skill icon-sources
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: icon-sources
Source: https://github.com/michaelkd01/dic-skills/tree/main/icon-sources
Command: npx skills add https://github.com/michaelkd01/dic-skills --skill icon-sources

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents inconsistent or low-quality icon swaps in frontend projects by directing every request toward Iconify for chrome-level UI elements and toward the premium Flaticon API for hero, feature, and marketing assets so builds stay polished without reverting to Lucide defaults.

Core Features & Use Cases

  • Iconify decision logic routes navigation, buttons, toggles, and status indicators through CDN-loaded Iconify components and the Iconify API to keep UI chrome consistent.
  • Frontend integration patterns document HTML script injection, React SVG fetching, and CSS mask/background techniques so every stack can adopt high-quality icons without installing new libraries.
  • Flaticon API workflow explains secure authentication via 1Password, popularity-first search, and automated SVG or PNG downloads for hero sections and feature grids.
  • Use case: When building a dashboard landing page, swap nav icons with Phosphor/Iconify assets and fetch vibrant hero illustrations from Flaticon to highlight strategic metrics.

Quick Start

Use the skill to replace Lucide defaults by directing Iconify for UI chrome, CSS masks for stateless icons, and Flaticon downloads for hero and marketing illustrations in your next frontend build.

Frequently Asked Questions about icon-sources

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

FAQPage Schema
How do I replace Lucide default icons with premium SVG assets in a frontend build?▼

To replace Lucide default icons, route UI chrome elements through CDN-loaded Iconify components and fetch premium SVG assets via the Flaticon API for hero sections, ensuring consistent design quality across your frontend build.

Can I use Iconify components for navigation controls and status indicators without installing new libraries?▼

Yes, Iconify components can be loaded via CDN for navigation controls and status indicators without installing new libraries, using HTML script injection, React SVG fetching, or CSS mask techniques to maintain UI chrome consistency.

What's the best way to fetch high-quality icons for marketing and landing page hero sections?▼

The best way to fetch marketing and hero section icons is using the Flaticon API workflow, which handles secure authentication, popularity-first search, and automated SVG or PNG downloads for vibrant feature grid illustrations.

Does this icon selection approach support CSS masks for stateless frontend icons?▼

Yes, the icon selection approach supports CSS masks and background techniques for stateless frontend icons, providing integration patterns that allow every stack to adopt high-quality icons without installing new dependencies.

Why do my frontend icon swaps look inconsistent across dashboards and marketing builds?▼

Frontend icon swaps look inconsistent when default Lucide icons are used arbitrarily, which this approach resolves by standardizing Iconify for UI chrome and Flaticon for marketing assets to keep builds polished.

How to authenticate Flaticon API downloads for premium SVG assets securely?▼

To authenticate Flaticon API downloads securely, use 1Password for credential management, perform popularity-first searches, and automate SVG or PNG downloads for hero sections and feature grids in your frontend build.

Related Skills

Explore More Design & Creative Skills→
wangqianCAIwangqianCAI

1password

Retrieve and inject secrets from 1Password vaults using the op CLI.

Community
Advanced
ManancodeManancode
1

svg-animations

Create and animate scalable SVG graphics with SMIL and CSS techniques.

Community
Advanced
wukangcheng2944wukangcheng2944

icon-finder

Search six Iconify libraries and deliver icons as SVG or components.

Community
Intermediate
HarshodaiHarshodai

design

Generate brand identity assets, SVG icons, and HTML presentations with Gemini AI.

Community
Advanced