Standardised icon selection and integration for all frontend builds. Routes icon decisions between Iconify (UI chrome via CDN web component) and Flaticon API (hero/feature icons via SVG download). Covers HTML artifacts, React artifacts, CSS-only usage, and Claude Code execution prompts. Triggers on any frontend build, landing page, dashboard, or UI component work.
Standardise icon selection and integration across all frontend builds. Replace default Lucide icons with higher-quality alternatives from Iconify (primary) and Flaticon API (secondary).
Is this a UI chrome icon? (nav, buttons, form elements, status indicators)
→ YES → Use Iconify
→ NO →
Is this a hero, feature, or marketing icon? (landing pages, feature grids, onboarding)
→ YES → Use Flaticon API (SVG download, embed inline)
→ NO → Use Iconify
Never default to Lucide unless the user explicitly requests it.
200k+ icons across 150+ open-source icon sets. Loads on-demand from CDN. Zero bundling.
| Context | Icon Set | Prefix | Notes |
|---|---|---|---|
| Dashboards, admin UIs | Material Symbols | material-symbols | Google's latest, variable weight/fill |
| Marketing pages, landing pages | Phosphor | ph | Clean, balanced, works at all sizes |
| Developer tools, technical UIs | Tabler | tabler | 4700+ icons, consistent 24px grid |
| Enterprise, data-heavy UIs | Carbon | carbon | IBM's design system icons |
| General fallback | Phosphor | ph | Best all-rounder |
Add CDN script to <head>, then use the web component:
<script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>
<!-- Basic usage -->
<iconify-icon icon="ph:rocket-launch-bold" width="24" height="24"></iconify-icon>
<!-- With colour override (monotone icons only) -->
<iconify-icon icon="material-symbols:dashboard" width="32" style="color: #3B82F6;"></iconify-icon>
<!-- Inline with text -->
<iconify-icon icon="tabler:settings" width="16" inline></iconify-icon> Settings
The <iconify-icon> web component works in React but uses class not className. For cleaner React integration, fetch SVGs from the Iconify API and render inline:
// Helper: fetch SVG from Iconify API
async function fetchIconSvg(prefix, name, size = 24, color) {
let url = `https://api.iconify.design/${prefix}/${name}.svg?width=${size}&height=${size}`;
if (color) url += `&color=${encodeURIComponent(color)}`;
const res = await fetch(url);
return await res.text();
}
// React component using dangerouslySetInnerHTML
function IconifySvg({ prefix, name, size = 24, color, className }) {
const [svg, setSvg] = React.useState('');
React.useEffect(() => {
fetchIconSvg(prefix, name, size, color).then(setSvg);
}, [prefix, name, size, color]);
return <span className={className} dangerouslySetInnerHTML={{ __html: svg }} />;
}
// Usage
<IconifySvg prefix="ph" name="rocket-launch-bold" size={24} />
<IconifySvg prefix="material-symbols" name="dashboard" size={32} color="#3B82F6" />
Alternative: use the web component directly in React (simpler, minor className caveat):
// Works in React ... use class= not className=
<iconify-icon icon="ph:rocket-launch-bold" width="24" height="24"></iconify-icon>
For icons in CSS without any JS:
/* Monotone icon inheriting currentColor via mask */
.icon-home {
display: inline-block;
width: 1.5em;
height: 1.5em;
background-color: currentColor;
mask-image: url('https://api.iconify.design/ph/house-bold.svg');
mask-repeat: no-repeat;
mask-size: 100% 100%;
-webkit-mask-image: url('https://api.iconify.design/ph/house-bold.svg');
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
}
/* Coloured icon as background */
.icon-status {
display: inline-block;
width: 1.5em;
height: 1.5em;
background-image: url('https://api.iconify.design/fluent-emoji-flat/check-mark-button.svg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
Useful for downloading SVGs in Claude Code builds:
GET https://api.iconify.design/{prefix}/{name}.svg
Parameters:
width / height ... dimensions (default: viewBox)color ... replaces currentColor (monotone only). Use %23 for # in hex codesrotate ... 90deg, 180deg, 270degflip ... horizontal, verticalbox=1 ... adds bounding rectangle (useful for design tool imports)download=1 ... forces download headersExamples: