Browse icons

switching from Iconify?

A free Iconify alternative

Short answer

Looking for a Iconify alternative? with icons is a free, MIT-licensed set of 500 icons in 20 styles: copy them as SVG or PNG, use <i class="with with-home"> tags, or install them from npm for React, Vue, Svelte, Angular and Solid. Iconify is one framework and one syntax (prefix:name) for over 300,000 open-source icons from 200+ icon sets, loaded on demand. Below: a side-by-side table, when to choose each, and a name map with a converter to switch.

Facts checked

At a glance

Iconify vs with icons

The facts that usually decide it, side by side. Small numbers link to the source.

Iconify compared with with icons
FeatureIconifywith icons
LicenceFramework MIT; every icon set keeps its own licence (MIT, Apache-2.0, CC BY 4.0, CC0 and others)[1][2]MIT, for the icons and the code
PriceFree; no paid tier found[1]Free. No paid tier, no account
IconsOver 300,000 open-source icons (“Over 300,000”) from 200+ icon sets[1][3]500 icons × 20 styles (10,000 SVGs)
StylesDepends on each icon set[3]20 styles on one 24 × 24 grid: Line, Solid, Duo, Gloss, Engrave, Blueprint, Sketch, Glass, Kawaii, Sticker, Pixel, Retro, Luxe, Bauhaus, Skeuo, Anime, Gothic, Pastel, Coquette and Plush. Every icon can also move: 32 CSS animations and 12 swap transitions (@withicons/motion)
Frameworks<iconify-icon> web component, React, Vue, Svelte, Tailwind CSS and UnoCSS plugins, an API[4]React, Vue, Svelte, Angular, Solid and a <with-icon> web component, all on npm; plus SVG, PNG and sprites
CSS classes / icon fontThrough Tailwind (icon-[mdi--home]) or UnoCSS (i-mdi-home) plugins[5]Yes: <i class="with with-home"></i>, add with-solid etc. for other styles
Self-hostingYes: bundle icon data at build time or host your own Iconify API[4]Yes: download SVGs, sprites and CSS (developers)
Design toolsOfficial “Iconify for Figma” plugin[6]Copy SVG and paste into Figma, Canva, PowerPoint (guides)
AI / MCPNo official MCP server or llms.txt found (community MCP servers exist)llms.txt an agent skill and an MCP server (@withicons/mcp)
Credit required?Depends on the icon set’s licence; some sets (e.g. CC BY) require credit[2]No

Iconify facts were checked on against the official sources numbered below. Prices and counts change, so follow the links for the latest. “None found” means we couldn’t find an official offering, not that none exists.

Which one?

Both are good. Here’s when each fits

Choose Iconify if…

  • You need breadth more than consistency: hundreds of sets and brand logos behind one API.
  • You already use Tailwind or UnoCSS and want icons as utility classes.
  • You want to mix icons from several open-source families in one project.

Choose with icons if…

  • You want one consistent family where every icon shares the same grid, names and stroke, in 20 styles.
  • You want a single licence (MIT) instead of checking each icon set’s terms.
  • You also need icons for slides, docs and design tools, with copy and download in any colour.

Migration guide

Switch from Iconify in minutes

Iconify icons are named prefix:name. The table uses Material Design Icons (mdi), one of the most used sets on Iconify; the converter also understands other prefixes and looks names up by meaning.

Before · Iconify
<script src="https://code.iconify.design/iconify-icon/3.0.3/iconify-icon.min.js"></script>

<iconify-icon icon="mdi:home"></iconify-icon>
<iconify-icon icon="mdi:magnify"></iconify-icon>
After · with icons
<script type="module" src="https://cdn.jsdelivr.net/npm/@withicons/web/dist/cdn.js"></script>

<with-icon name="home"></with-icon>
<with-icon name="search"></with-icon>

Most Iconify sets have one look per prefix. Use our Line for outline sets and Solid for filled ones such as mdi.

Paste your Iconify code

It converts as you type, right here in your browser: known names from the table, plus a meaning search for the rest. Check the result; icons we don’t have are listed so you can search for them.

<iconify-icon icon="mdi:home"></iconify-icon>
<iconify-icon icon="mdi:magnify"></iconify-icon>
<Icon icon="mdi:delete" />
<iconify-icon icon="mdi:cog"></iconify-icon>

Turn on JavaScript to convert.

Name map: common icons

Show with icons in
Iconify icons and their with icons equivalents
Iconifywith icons
mdi:homehome<with-icon name="home">
mdi:magnifysearch<with-icon name="search">
mdi:deletetrash<with-icon name="trash">
mdi:cogsettings<with-icon name="settings">
mdi:accountuser<with-icon name="user">
mdi:emailmail<with-icon name="mail">
mdi:closeclose<with-icon name="close">
mdi:checkcheck<with-icon name="check">
mdi:plusplus<with-icon name="plus">
mdi:menumenu<with-icon name="menu">
mdi:pencilpencil<with-icon name="pencil">
mdi:downloaddownload<with-icon name="download">
mdi:uploadupload<with-icon name="upload">
mdi:heartheart<with-icon name="heart">
mdi:starstar<with-icon name="star">
mdi:bellbell<with-icon name="bell">
mdi:calendarcalendar<with-icon name="calendar">
mdi:locklock<with-icon name="lock">
mdi:arrow-rightarrow-right<with-icon name="arrow-right">
mdi:chevron-downchevron-down<with-icon name="chevron-down">
mdi:share-variantshare<with-icon name="share">
mdi:content-copycopy<with-icon name="copy">
mdi:open-in-newexternal-link<with-icon name="external-link">
mdi:eyeeye<with-icon name="eye">
mdi:filterfilter<with-icon name="filter">
mdi:informationinfo-circle<with-icon name="info-circle">
mdi:alertalert-triangle<with-icon name="alert-triangle">
mdi:cartshopping-cart<with-icon name="shopping-cart">
mdi:imageimage<with-icon name="image">
mdi:phonephone<with-icon name="phone">

Iconify icons © Pictogrammers (Material Design Icons), Apache License 2.0 (v7.4.47), from the official package and shown only for comparison.

Find the with icons version of any Iconify icon

Type the Iconify name or just what it means (“magnify”). Search understands synonyms and typos across all 500 icons.

Click an icon to copy its <i> tag. The arrow opens its page.

FAQ

Iconify alternative: questions

What is the best free alternative to Iconify?

It depends on what you need. with icons is a free, MIT-licensed set of 500 icons in 20 styles that works in code, slides, docs and design tools, with no credit required. Other popular free options include Font Awesome, Material Symbols, Heroicons; compare them all.

Is Iconify free?

Free; no paid tier found. Licence: Framework MIT; every icon set keeps its own licence (MIT, Apache-2.0, CC BY 4.0, CC0 and others). (Checked 1 October 2026; see the sources below.)

How many icons does with icons have compared with Iconify?

with icons has 500 icons, each drawn in 20 styles (10,000 SVGs). Iconify: over 300,000 open-source icons (“Over 300,000”) from 200+ icon sets. Iconify is the bigger library; with icons focuses on a curated set with more styles.

Do I need to credit with icons?

No. with icons is MIT licensed: free for personal and commercial use with no attribution. If you redistribute the icon files themselves, include the licence text. Licence in plain words.

Is with icons available through Iconify?

Not today. with icons ships its own packages, a web component, CSS classes and plain SVG, so you don’t need an aggregator to use it.

Sources

Where these facts come from

Official Iconify pages, repositories and package registries, checked . Spotted something out of date? Tell us on GitHub.

  1. Iconify website · iconify.design
  2. Iconify README (GitHub) · github.com/iconify/iconify/blob/main/README.md
  3. Iconify icon sets browser · icon-sets.iconify.design
  4. Iconify documentation · iconify.design/docs
  5. Iconify for Tailwind CSS · iconify.design/docs/usage/css/tailwind
  6. Iconify for Figma · iconify.design/docs/design/figma
  7. Iconify API used to check names (mdi) · api.iconify.design/mdi.json?icons=home,magnify,delete,cog

Try with icons instead of Iconify

500 icons, 20 styles, MIT. Nothing to install to start: copy, download or drag.

Browse all icons