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

Iconify — 250k+ free icons from all sets, in a single script tag

Iconify is an icon service that lets you use Font Awesome, Material Icons, Phosphor or 200+ other icon sets using just one script tag. Just visit iconify.design and copy the name — that’s it!

iconsvibesvguidesigngithub

When I ask my agents to include icons in the projects, they often default to their favorite icon sets. It sometimes turns out great, but often the results don’t look exactly how I want them to. In such cases I have to ask them to change the icon set mid-project, which is inconsistent. Iconify lets me avoid this problem by letting me use 250,000 icons from 200+ icon sets with just one script tag.

How does it work? You include a script tag into your project and then you can use <iconify-icon icon="mdi:home"> in the places where you want an icon. The icon will be loaded dynamically from the Iconify API, so you don’t have to worry about downloading any icons, installing packages, or anything else. You can find all icons visually at iconify.design, so all you have to do is copy the name of the icon.

Source

iconify/iconify

★ 6,250TypeScript

Open on GitHub →

Icon sets included contain just about every set you could imagine. Font Awesome? Check. Material Design Icons by Google? Check. Phosphor Icons? Check. Feather? Check. Tabler Icons? Check. Heroicons? Check. Over 200 more? Check! No matter what icon you are looking for, it’s probably included.

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