switching from Phosphor?

A free Phosphor alternative

Short answer

Looking for a Phosphor 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. Phosphor (and Phosphor Icons) is a flexible family of about 1,500 icons in six weights (thin, light, regular, bold, fill, duotone), with packages for web, mobile and desktop. Below: a side-by-side table, when to choose each, and a name map with a converter to switch.

Facts checked 1 October 2026

At a glance

Phosphor vs with icons

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

Phosphor compared with with icons
Feature	Phosphor	with icons
Licence	MIT[2]	MIT, for the icons and the code
Price	Free; optional donations[6]	Free. No paid tier, no account
Icons	About 1,500 icons in each of 6 weights (1,512 per weight in `@phosphor-icons/core` 2.1.1, over 9,000 SVGs)[5][4]	500 icons × 20 styles (10,000 SVGs)
Styles	Six weights: Thin, Light, Regular, Bold, Fill and Duotone[1]	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	React, Vue, web components, a web font, React Native, Flutter, Swift, Elm and Android[1][7]	React, Vue, Svelte, Angular, Solid and a `<with-icon>` web component, all on npm; plus SVG, PNG and sprites
CSS classes / icon font	Yes: `<i class="ph ph-house"></i>`; weights via `ph-bold`, `ph-fill`…[3]	Yes: `<i class="with with-home"></i>`, add `with-solid` etc. for other styles
Self-hosting	Yes: npm (`@phosphor-icons/web`, `@phosphor-icons/core`) or CDN[3]	Yes: download SVGs, sprites and CSS (developers)
Design tools	Official Figma plugin and file; Sketch and Penpot plugins[1]	Copy SVG and paste into Figma, Canva, PowerPoint (guides)
AI / MCP	No official MCP server or llms.txt found	llms.txt an agent skill and an MCP server (`@withicons/mcp`)
Credit required?	No (keep the MIT notice when redistributing the code)[2]	No

Phosphor facts were checked on 1 October 2026 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 Phosphor if…

You want six weights of the same icon, from hairline Thin to Bold and Duotone.
You build for mobile and desktop too (React Native, Flutter, Swift).
You need about 1,500 icons, about three times our 500.

Choose with icons if…

You want styles with more character: Gloss, Engrave, Blueprint and Sketch, not just weights.
You want Svelte, Angular and Solid packages and an MCP server for AI tools.
You also make slides and docs: copy as PNG or SVG in any colour, straight from the site.

Migration guide

Switch from Phosphor in minutes

Phosphor’s web font uses ph ph-name plus a weight class; with icons uses with with-name plus a style class. Fix the names that differ (house → home, gear → settings, list → menu).

Before · Phosphor

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@<VERSION>/src/regular/style.css">

<i class="ph ph-house"></i>
<i class="ph-fill ph-heart"></i>
<i class="ph-duotone ph-gear"></i>

After · with icons

<script src="https://cdn.jsdelivr.net/npm/@withicons/classes/dist/with-loader.js" defer></script>

<i class="with with-home"></i>
<i class="with with-heart with-solid"></i>
<i class="with with-settings with-duo"></i>

Phosphor Regular, Light, Thin and Bold → our Line (adjust strokeWidth in the components); Fill → with-solid; Duotone → with-duo.

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

Phosphor code

with icons code

<i class="ph ph-house"></i>
<i class="ph-fill ph-heart"></i>
<i class="ph-duotone ph-gear"></i>
<i class="ph ph-list"></i>
<i class="ph-bold ph-magnifying-glass"></i>

Turn on JavaScript to convert.

Name map: common icons

Show with icons in

Phosphor icons and their with icons equivalents
Phosphor	with icons
`house`	home`with-home`
`magnifying-glass`	search`with-search`
`trash`	trash`with-trash`
`gear`	settings`with-settings`
`user`	user`with-user`
`envelope`	mail`with-mail`
`x`	close`with-close`
`check`	check`with-check`
`plus`	plus`with-plus`
`list`	menu`with-menu`
`pencil-simple`	pencil`with-pencil`
`download-simple`	download`with-download`
`upload-simple`	upload`with-upload`
`heart`	heart`with-heart`
`star`	star`with-star`
`bell`	bell`with-bell`
`calendar`	calendar`with-calendar`
`lock`	lock`with-lock`
`arrow-right`	arrow-right`with-arrow-right`
`caret-down`	chevron-down`with-chevron-down`
`share-network`	share`with-share`
`copy`	copy`with-copy`
`arrow-square-out`	external-link`with-external-link`
`eye`	eye`with-eye`
`funnel`	filter`with-filter`
`info`	info-circle`with-info-circle`
`warning`	alert-triangle`with-alert-triangle`
`shopping-cart`	shopping-cart`with-shopping-cart`
`image`	image`with-image`
`phone`	phone`with-phone`

Phosphor icons © Phosphor Icons, MIT License (v2.1.1), from the official package and shown only for comparison.

Find the with icons version of any Phosphor icon

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

Search icons

Any colour

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

FAQ

Phosphor alternative: questions

What is the best free alternative to Phosphor?

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

Free; optional donations. Licence: MIT. (Checked 1 October 2026; see the sources below.)

How many icons does with icons have compared with Phosphor?

with icons has 500 icons, each drawn in 20 styles (10,000 SVGs). Phosphor: about 1,500 icons in each of 6 weights (1,512 per weight in @phosphor-icons/core 2.1.1, over 9,000 SVGs). Phosphor 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 have a duotone style like Phosphor?

Yes: Duo is an outline over a soft tinted fill. With the optional runtime script you can set the tint colour separately (--with-duo).

Sources

Where these facts come from

Official Phosphor pages, repositories and package registries, checked 1 October 2026. Spotted something out of date? Tell us on GitHub.

Phosphor homepage README (GitHub) · github.com/phosphor-icons/homepage#readme
Phosphor licence · raw.githubusercontent.com/phosphor-icons/homepage/master/LICENSE
@phosphor-icons/web README · github.com/phosphor-icons/web#readme
@phosphor-icons/react README · github.com/phosphor-icons/react#readme
@phosphor-icons/core 2.1.1 (names and counts) · unpkg.com/@phosphor-icons/core@2.1.1
Phosphor website · phosphoricons.com
Phosphor on GitHub · github.com/phosphor-icons

Try with icons instead of Phosphor

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

Browse all icons