an honest comparison
with icons vs Phosphor: weights or styles?
Phosphor lets you turn the thickness of every icon up and down. with icons lets you change its whole personality. Both are free and MIT. Here is how to choose.
- Pick Phosphor if you want about 1,500 icons, each in six weights (Thin, Light, Regular, Bold, Fill, Duotone), and official packages for Flutter and SwiftUI as well as the web.
- Pick with icons if you want looks with more character: 500 icons in 20 styles, from plain line and solid to glossy, frosted glass, pixel art, retro and hand-drawn.
- Both are free and MIT licensed, with no visible credit needed and no paid tier.
- Phosphor’s weights change how thick an icon is. with icons’ styles change how it feels. Both include a filled and a two-tone version.
- Phosphor has official Flutter, SwiftUI and Elm packages (React Native via the community). with icons adds an MCP server for AI tools and one-click PNG copies for slides.
On this page 12 sections
Phosphor or with icons: which should you use? Pick Phosphor if you need a big library (about 1,500 icons) with six line weights and official Flutter and SwiftUI packages. Pick with icons if you want 500 everyday icons in 20 styles with more personality, for your app, your website and your slides. Both are free and MIT licensed, so neither choice will cost you a penny.
The two sets share a big idea: one icon should come in more than one look. They just disagree on what “look” means. Phosphor changes the weight, from a hairline to a bold stroke. with icons changes the style, from a plain outline to something glossy, carved or hand-drawn. Let’s look closer.
How do Phosphor and with icons compare?
| with icons | Phosphor | |
|---|---|---|
| Price | Free | Free |
| Licence | MIT, no visible credit | MIT, no visible credit |
| Number of icons | 500 icons × 20 styles = 10,000 SVGs | About 1,500 icons × 6 weights, over 9,000 SVGs |
| Variations | 20 styles: line, solid and duo, plus 17 creative ones like glass, pixel, retro and luxe | 6 weights: Thin, Light, Regular, Bold, Fill, Duotone |
| Expressive, illustration-like looks | 17 creative styles, from gloss and engrave to kawaii and plush | No |
| Web packages | React, Vue, Svelte, Angular, Solid, web component | React, Vue, web components, web font |
| Mobile and desktop | Not yet | Flutter and SwiftUI (official), React Native (community) |
| Design tools | SVG and PNG from every icon page | Figma, Sketch and Penpot plugins |
| Help for AI assistants | MCP server, llms.txt, agent skill | None official found |
What do Phosphor and with icons icons look like side by side?
Tables only tell half the story, so here are the real icons. Each pair shows our icon on top and Phosphor’s below, taken from Phosphor’s official core package (version 2.1.1). We matched our everyday line style with Phosphor’s Regular weight, because that is the look most people start with.
homehousesearchmagnifying-glasssettingsgearuseruserbellbellmailenvelopehearthearttrashtrashcalendarcalendarshopping-cartshopping-cartstarstardownloaddownload-simplehouse, search magnifying-glass, settings gear and mail envelope. Those are the ones to rename if you switch. Also notice that Phosphor Regular draws a slightly lighter line than our line style.Phosphor icons © Phosphor Icons, MIT License (v2.1.1), shown for comparison.What is Phosphor?
Phosphor is a free, open-source icon family. Its README says the icons are designed at 16 × 16 pixels so they read well small and scale up big. The official core package has 1,512 icons, and every one of them comes in six weights:
- Thin, Light, Regular and Bold: the same outline drawn with thinner or thicker lines.
- Fill: a solid, filled-in version.
- Duotone: the shape with a lighter second tone, for a soft two-colour look.
That adds up to more than 9,000 SVG files. Phosphor also has official packages for React, Vue, web components and a web font with simple classes like <i class="ph ph-house"> (the house you see in the rows above), plus official libraries for Flutter, SwiftUI and Elm, and plugins for Figma, Sketch and Penpot. The community has made dozens more ports on top of that, including React Native, Svelte and Solid.
What is with icons?
with icons is a free set of 500 everyday icons, drawn by hand once each on a 24 × 24 grid. A program then renders every drawing into 20 styles. The first three (line, solid and duo) are for interfaces. The other 17 are for when an icon should feel more like an illustration: glossy, frosted glass, banknote engraving, 16-bit pixel art, 70s retro, felt plush and more. Each icon also comes with 20 to 30 hand-picked colour palettes for the colourful styles.
Compare that heart with Phosphor’s heart in the rows above: six thicknesses there, 20 personalities here.
- 500
- hand-drawn icons
- 20
- styles
- 10,000
- SVG files
- $0
- no paid tier
What is the difference between icon weights and icon styles?
Think of a font. Weights are like Light, Regular and Bold: the same letters, thicker or thinner. Styles are more like switching from a clean sans-serif to a handwritten script: same words, totally different feeling.
Phosphor’s weights are brilliant for matching icons to your text. If your headings are bold and your body copy is light, you can pick icons that sit perfectly next to both. It is a subtle, very designer-friendly tool.
with icons’ styles are for changing the mood of a page. Blueprint style makes a feature list feel technical. Sketch style makes a lesson feel friendly. Gloss style makes a pricing card feel premium. Phosphor does not try to do this; with icons does.
Which with icons style matches each Phosphor weight?
Where the two sets overlap, they map quite neatly: all six Phosphor weights land on our three interface styles. Our 17 creative styles have no Phosphor equivalent at all, so we grouped them by feel. This is handy if you are moving from one to the other:
| Phosphor weight | Closest with icons style | Good for |
|---|---|---|
| Thin, Light, Regular, Bold | Line (1.75px outline; the stroke width can be adjusted in the components) | Buttons, menus, everyday interface |
| Fill | Solid | Active tabs, small sizes, emphasis |
| Duotone | Duo (line over a soft tint) | Friendly dashboards, cards, empty states |
| No equivalent | Gloss, glass, luxe, skeuo (polished and 3D) | Pricing cards, premium hero sections, product pages |
| No equivalent | Engrave, blueprint, sketch (drawn by hand or on the drafting table) | Feature lists, lessons, posters, illustrations |
| No equivalent | Pixel, retro, bauhaus, sticker (bold and graphic) | Games, playful brands, social posts |
| No equivalent | Kawaii, plush, pastel, coquette, anime, gothic (full of character) | Kids’ products, lifestyle brands, themed campaigns |
The other place the two sets meet is two-tone icons. Phosphor’s Duotone and our Duo style both add a softer second tone to the shape. Ours keeps the normal line drawing and puts a gentle tint behind it, so a duo icon can sit right next to a line icon without looking out of place. Both are great for dashboards, cards and empty states, where plain outlines can feel a bit cold.
Is Phosphor free for commercial use?
Yes. Phosphor uses the MIT licence, and so does with icons. In plain words: use the icons in your website, app, client work or a product you sell, and you never need to show a credit. If you share the source files themselves, keep the short licence notice with them.
Neither set has a Pro tier, so there is no “this weight is paid” surprise. That puts these two in a small, friendly club. Our guide to free icons for commercial use explains how this compares with other licences.
Is Phosphor or with icons better for presentations?
Phosphor works well in slides: the Bold and Fill weights are easy to see on a projector, and Duotone adds a gentle splash of colour. If you design in Figma, Sketch or Penpot, the plugins make it quick.
with icons makes slides its home turf. Every icon page has Copy image, so you can paste an icon straight into Google Slides, PowerPoint or Canva, plus PNG and SVG downloads in any colour and size. And the expressive styles are made exactly for big, on-screen moments.
Use one style per slide, and keep a single style for the whole deck where you can.
Mix thin outlines, chunky fills and glossy icons on the same slide. Even with one icon family, too many looks at once feels messy.
Can I use Phosphor or with icons in mobile apps?
This is a clear Phosphor win. It has official packages for Flutter and SwiftUI, and community ports for React Native and many more, so you can use the same icons in a web app, an iPhone app and a Flutter app.
with icons focuses on the web: React, Vue, Svelte, Angular and Solid components, a web component and plain CSS classes, all on npm and the jsDelivr CDN. You can still use our SVGs in any app, but you will not find a ready-made Flutter or Swift package. See the developer page for the install lines.
What are the pros and cons of Phosphor and with icons?
Both sets are good, honest projects, and neither is perfect. Here is what each does well and what to keep in mind, in plain words.
What’s great
A big library. About 1,500 icons, so you will rarely hit a gap. That is roughly three times as many ideas as with icons covers.
Six weights for every icon. You can match icons to your fonts: thin icons next to light text, bold icons next to bold headings. Every icon has all six.
Made for small screens. Phosphor designs its icons at 16 × 16 pixels, so they stay crisp in tight spots like toolbars and menus.
Works beyond the web. Official packages for Flutter, SwiftUI and Elm mean one icon family can cover your website and your phone apps.
Friendly for designers. Official Figma, Sketch and Penpot plugins put the icons right where design teams already work.
What to keep in mind
One personality. The weights change thickness, not mood. There is no glossy, carved or hand-drawn version for a hero section or a poster.
Some ports are community-made. React Native, Svelte and Solid rely on community packages, which can lag behind the official ones.
Lots of choice to agree on. Six weights are great, but a team has to pick one and stick to it, or screens can end up looking uneven.
No official AI help found. When we checked, there was no official MCP server or llms.txt, so AI assistants may guess icon names.
What’s great
20 styles from one drawing. Line, solid and duo for apps, plus 17 creative styles like gloss, glass, pixel, retro and luxe for slides and landing pages. They all match because they share one drawing.
Made for non-coders too. Every icon page has Copy image, PNG downloads in any size and colour, and SVG downloads. Paste straight into slides or docs.
Free with no catches. MIT licence, no credit needed and no paid tier, just like Phosphor.
Easy to search. Search understands everyday words, so “bin” finds trash and “gear” finds settings.
Ready for AI assistants. An MCP server, llms.txt and an agent skill let AI tools pick real icon names instead of guessing.
What to keep in mind
A smaller catalogue. There are 500 icons and no brand logos. If you need rare or niche icons, Phosphor will have more of them.
Web only. The packages cover React, Vue, Svelte, Angular, Solid and a web component, but there are no Flutter or SwiftUI packages. For native apps you use the SVG files.
Newer, with a smaller community. with icons is a young project, so you will find fewer tutorials, ports and forum answers than for Phosphor.
Creative styles need room. Gloss, glass, engrave and the other creative styles are made for 32px and larger. For tiny interface icons, stick to line, solid or duo.
Who suits which? Phosphor suits product teams who need lots of icons, careful control over line thickness and native apps on phones. with icons suits people who make apps and slides, websites and docs, and who want one family that can be calm in the interface and bold on the homepage. If you work with AI assistants, our MCP server is a nice bonus.
Which one should you pick?
- You want styles with character: gloss, glass, pixel, retro, sketch and more.
- You want one family for your app, website and presentations.
- You make slides and want one-click PNG copies.
- You use AI assistants and want them to find real icon names.
- You need about 1,500 icons with six weights each.
- You want to match icon thickness to your fonts.
- You build native apps with Flutter or SwiftUI.
So, Phosphor or with icons?
Phosphor and with icons are both generous, free and MIT licensed, and both give you more than one look per icon. Phosphor tunes the weight, with icons changes the whole style. Big catalogue and native apps? Phosphor. A smaller set that can be calm in your app and bold on your homepage? with icons. To see how other sets handle styles, read icon styles explained or with icons vs Hugeicons.
Frequently asked questions
Is Phosphor free for commercial use?
Yes. Phosphor Icons are released under the MIT licence, so you can use them in commercial websites, apps and products. You do not need a visible credit; keep the licence notice if you redistribute the source code.
How many icons does Phosphor have?
About 1,500 icons, each in six weights. The official @phosphor-icons/core package (version 2.1.1) has 1,512 icons per weight, which is just over 9,000 SVG files in total. Its GitHub README still says 1,248, an older figure.
What are the six Phosphor weights?
Thin, Light, Regular, Bold, Fill and Duotone. The first four are outlines with different line thicknesses, Fill is a solid version, and Duotone pairs the shape with a lighter second tone.
What is the best Phosphor Icons alternative?
It depends on why you are switching. If you want more looks per icon, with icons gives you 500 icons in 20 styles, including glossy, glass, pixel, retro and hand-drawn ones, under the same MIT licence. If you want a bigger single-style outline set, Lucide (over 1,600 icons, ISC licence) is a popular choice.
Is with icons duo the same as Phosphor duotone?
They are similar ideas. Both pair an icon with a softer second tone. with icons duo keeps the normal line drawing and places a soft tint behind it, so it sits naturally next to line icons.
Phosphor vs Lucide: which should I use?
Lucide has more icons (over 1,600) in one adjustable outline style and is the shadcn/ui default. Phosphor has about 1,500 icons in six weights, including fill and duotone, and official Flutter and SwiftUI packages. Both are free; Lucide is ISC, Phosphor is MIT.
Sources and notes
- Phosphor Icons website
- Phosphor homepage README (weights, ports, plugins)
- Phosphor licence (MIT)
- @phosphor-icons/core 2.1.1 (icon files per weight, used for the side-by-side icons)
- @phosphor-icons/web README (CSS classes)
- Lucide README (icon count, ISC licence)
- with icons license (MIT)
Facts about other icon sets were checked against their official sites in October 2026. Libraries change, so check the links above for the latest numbers.