Browse icons

switching from Ionicons?

A free Ionicons alternative

Short answer

Looking for a Ionicons 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. Ionicons is the Ionic team’s open-source app icons: about 1,300 icons in filled, outline and sharp variants, shipped as the <ion-icon> web component. Below: a side-by-side table, when to choose each, and a name map with a converter to switch.

Facts checked

At a glance

Ionicons vs with icons

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

Ionicons compared with with icons
FeatureIoniconswith icons
LicenceMIT[1][4]MIT, for the icons and the code
PriceFree, no paid tier found[2]Free. No paid tier, no account
IconsAbout 1,300 (“1,300 icons” in the README; the npm manifest lists 1,357 names including variants)[1][5]500 icons × 20 styles (10,000 SVGs)
StylesFilled (default), Outline (-outline) and Sharp (-sharp); 512 × 512 viewBox[3][6]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)
FrameworksOne web component, <ion-icon>, that works in any framework; included with Ionic Framework (Angular, React, Vue)[1]React, Vue, Svelte, Angular, Solid and a <with-icon> web component, all on npm; plus SVG, PNG and sprites
CSS classes / icon fontNo icon font: <ion-icon name="home-outline"></ion-icon>[3]Yes: <i class="with with-home"></i>, add with-solid etc. for other styles
Self-hostingYes: install from npm and serve the SVGs yourself[1]Yes: download SVGs, sprites and CSS (developers)
Design toolsDownloadable designer pack; no official Figma plugin found[2]Copy SVG and paste into Figma, Canva, PowerPoint (guides)
AI / MCPNo official MCP server or llms.txt foundllms.txt an agent skill and an MCP server (@withicons/mcp)
Credit required?No (standard MIT notice when redistributing the code)[1]No

Ionicons 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 Ionicons if…

  • You build with Ionic Framework: Ionicons is already there and matches the platform look.
  • You want iOS- and Material-flavoured app icons with filled, outline and sharp variants.
  • You want about 1,300 icons, about three times our 500, including many brand logos.

Choose with icons if…

  • You want the same icon set to work in slides, docs and design tools, not just in code.
  • You want plain <i> tag classes or inline SVG with no JavaScript runtime.
  • You want expressive styles too: Gloss, Engrave, Blueprint and Sketch alongside Line, Solid and Duo.

Migration guide

Switch from Ionicons in minutes

Ionicons names describe the variant with a suffix (-outline, -sharp); with icons uses one name and a variant. Our web component mirrors the Ionicons pattern, so most swaps are one attribute.

Before · Ionicons
<script type="module" src="https://esm.sh/ionicons@latest/loader"></script>

<ion-icon name="home-outline"></ion-icon>
<ion-icon name="heart"></ion-icon>
<ion-icon name="notifications-outline"></ion-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="heart" variant="solid"></with-icon>
<with-icon name="bell"></with-icon>

Ionicons outline → our Line; Ionicons filled → our Solid. Sharp has no direct twin; Line or Solid are closest.

Paste your Ionicons 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.

<ion-icon name="home-outline"></ion-icon>
<ion-icon name="heart"></ion-icon>
<ion-icon name="notifications-outline"></ion-icon>
<ion-icon name="cart-outline"></ion-icon>

Turn on JavaScript to convert.

Name map: common icons

Show with icons in
Ionicons icons and their with icons equivalents
Ioniconswith icons
home-outlinehome<with-icon name="home">
search-outlinesearch<with-icon name="search">
trash-outlinetrash<with-icon name="trash">
settings-outlinesettings<with-icon name="settings">
person-outlineuser<with-icon name="user">
mail-outlinemail<with-icon name="mail">
close-outlineclose<with-icon name="close">
checkmark-outlinecheck<with-icon name="check">
add-outlineplus<with-icon name="plus">
menu-outlinemenu<with-icon name="menu">
create-outlineedit<with-icon name="edit">
pencil-outlinepencil<with-icon name="pencil">
download-outlinedownload<with-icon name="download">
cloud-upload-outlinecloud-upload<with-icon name="cloud-upload">
heart-outlineheart<with-icon name="heart">
star-outlinestar<with-icon name="star">
notifications-outlinebell<with-icon name="bell">
calendar-outlinecalendar<with-icon name="calendar">
lock-closed-outlinelock<with-icon name="lock">
arrow-forward-outlinearrow-right<with-icon name="arrow-right">
chevron-down-outlinechevron-down<with-icon name="chevron-down">
share-outlineshare<with-icon name="share">
copy-outlinecopy<with-icon name="copy">
open-outlineexternal-link<with-icon name="external-link">
eye-outlineeye<with-icon name="eye">
filter-outlinefilter<with-icon name="filter">
information-circle-outlineinfo-circle<with-icon name="info-circle">
warning-outlinealert-triangle<with-icon name="alert-triangle">
cart-outlineshopping-cart<with-icon name="shopping-cart">
image-outlineimage<with-icon name="image">
call-outlinephone<with-icon name="phone">

Ionicons icons © Ionic, MIT License (v8.1.0), from the official package and shown only for comparison.

Find the with icons version of any Ionicons icon

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

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

FAQ

Ionicons alternative: questions

What is the best free alternative to Ionicons?

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 Ionicons free?

Free, no paid tier found. Licence: MIT. (Checked 1 October 2026; see the sources below.)

How many icons does with icons have compared with Ionicons?

with icons has 500 icons, each drawn in 20 styles (10,000 SVGs). Ionicons: about 1,300 (“1,300 icons” in the README; the npm manifest lists 1,357 names including variants). Ionicons 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.

Does with icons work like the ion-icon web component?

Yes. <with-icon name="home"></with-icon> works in any framework, and variant="solid" (or any of the 20 styles) replaces the Ionicons name suffix. Install it with npm i @withicons/web, or load it from jsDelivr.

Sources

Where these facts come from

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

  1. Ionicons README (GitHub) · github.com/ionic-team/ionicons/blob/main/readme.md
  2. Ionicons website · ionic.io/ionicons
  3. Ionicons usage docs · ionic.io/ionicons/usage
  4. npm: ionicons · www.npmjs.com/package/ionicons
  5. ionicons.json manifest (v8.1.0) · unpkg.com/ionicons@8.1.0/dist/ionicons.json
  6. Example SVG (viewBox) · unpkg.com/ionicons@8.1.0/dist/svg/home-outline.svg

Try with icons instead of Ionicons

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

Browse all icons