← All news·2026-08-06·4 min read

Iconify: 250,000+ Free Icons from Every Major Set in One Script Tag

Iconify gives your agent access to Font Awesome, Material Icons, Phosphor and 200+ icon sets through one script tag. Browse icons at iconify.design, paste the name — done.

iconsvibesvguidesigngithub

Whenever I tell an agent to add icons to a project, it usually reaches for whatever icon set it's most comfortable with. Sometimes that works out fine. Often the style doesn't quite match what I had in mind, and I end up asking it to switch sets halfway through — which breaks consistency. Iconify solves this by putting 250,000 icons from 200+ different sets all behind a single script tag.

The way it works: you add one script to your page, then use a tag like `<iconify-icon icon="mdi:home">` wherever you need an icon. The icon loads from Iconify's API on demand, so you dont need to download any icon files, install any packages, or manage anything locally. You can browse every single icon visually at iconify.design and copy the exact name to paste.

Source

iconify/iconify

★ 6,250TypeScript

Open on GitHub →

The collections inside cover basically everything you'd ever reach for: Font Awesome, Google's Material Design Icons, Phosphor Icons, Feather, Tabler Icons, Heroicons — and well over 200 more. Whatever specific icon you're looking for, it's almost certainly in there somewhere.

How to add Iconify to your project

Add the Iconify script tag to your HTML <head>

<script src="https://cdn.jsdelivr.net/npm/iconify-icon@2/dist/iconify-icon.min.js"></script>

Use any icon anywhere in your HTML

<!-- Find icon names at iconify.design -->
<iconify-icon icon="mdi:home"></iconify-icon>
<iconify-icon icon="ph:rocket-bold"></iconify-icon>
<iconify-icon icon="fa6-solid:heart"></iconify-icon>
<iconify-icon icon="heroicons:arrow-right-20-solid"></iconify-icon>

What to tell your agent

Add Iconify to this project: insert the script tag from cdn.jsdelivr.net/npm/iconify-icon@2 into the <head>, then replace icon placeholders with <iconify-icon icon="set:name"> tags. Find icon names at iconify.design — search for what you need and copy the displayed identifier.

Icon sets included in Iconify

1Font Awesome 6 — the most widely used icon set, thousands of icons including brand logos
2Material Design Icons (MDI) — Google's icon system, clean and consistent at any size
3Phosphor Icons — a flexible family with 6 weight variants per icon (thin through fill)
4Feather — minimal open-source icons with a light hand-drawn quality, great for clean UIs
5Heroicons — made by the Tailwind CSS team, works especially well with Tailwind-based designs
6Tabler Icons — over 5,000 MIT-licensed SVG icons, clean lines and well-organized naming

✓What you get

250,000+ icons from 200+ sets behind a single script tag. Search at iconify.design, copy the icon name, tell your agent to use it — and any icon from any popular set appears on your page instantly. No files, no packages, no mismatched icon styles.

Source: github.com

Free course

Stop reading about AI — start building with it

The free Claude Code course: your first site, tool or game — no coding. No upsells, no cross-sells — nothing to buy here.

Start free →

▌ Related guides

▸Draw First, Build Later: /design in Claude Code ▸Claude Code on the Web: Code From a Browser, Zero Install