switching from Material Symbols?
A free Material Symbols alternative
Looking for a Material Symbols 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. Material Symbols (and Material Icons) is Google’s Material Design icons: over 2,500 symbols in a free variable font with fill, weight, grade and optical-size axes, a natural fit for Material and Android-style interfaces. Below: a side-by-side table, when to choose each, and a name map with a converter to switch.
Facts checked
At a glance
Material Symbols vs with icons
The facts that usually decide it, side by side. Small numbers link to the source.
| Feature | Material Symbols | with icons |
|---|---|---|
| Licence | Apache License 2.0[1][3] | MIT, for the icons and the code |
| Price | Free[1] | Free. No paid tier, no account |
| Icons | Over 2,500 (“a collection of over 2,500 icons”)[1] | 500 icons × 20 styles (10,000 SVGs) |
| Styles | Outlined, Rounded and Sharp, with variable Fill, Weight (100–700), Grade and Optical size axes[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 | A web font plus SVG and PNG downloads from Google; the popular npm packages are community-made[1][4] | React, Vue, Svelte, Angular, Solid and a <with-icon> web component, all on npm; plus SVG, PNG and sprites |
| CSS classes / icon font | Font ligatures: <span class="material-symbols-outlined">home</[1] | Yes: <i class="with with-home"></, add with-solid etc. for other styles |
| Self-hosting | Yes: font files in the official GitHub repo, or download SVG/PNG[3] | Yes: download SVGs, sprites and CSS (developers) |
| Design tools | Download SVG or PNG from Google Fonts[5] | Copy SVG and paste into Figma, Canva, PowerPoint (guides) |
| AI / MCP | Google’s Design MCP can find icons and defaults to Material Symbols[6] | llms.txt an agent skill and an MCP server (@withicons/mcp) |
| Credit required? | Not required (“appreciated but not required”)[3] | No |
Material Symbols 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 Material Symbols if…
- Your app follows Material Design or Android conventions.
- You want one variable font where fill, weight and size are adjustable axes.
- You need breadth: over 2,500 symbols, with consistent Google-made coverage.
Choose with icons if…
- You want a look that isn’t tied to Google’s design language, including Duo, Gloss, Engrave, Blueprint and Sketch.
- You want official packages for React, Vue, Svelte, Angular and Solid from the same team that draws the icons.
- You want icons ready for slides and docs: copy as PNG or SVG in any colour, no font setup.
Migration guide
Switch from Material Symbols in minutes
Material uses a font ligature (the icon name is the text inside the tag). with icons uses a class instead. Replace each <span class="material-symbols-outlined">name</ with <i class="with with-name"></. Legacy Material Icons (material-icons, no longer updated by Google) works the same way.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined">
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">favorite</span>
<span class="material-symbols-outlined">delete</span><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"></i>
<i class="with with-trash"></i>Material Outlined → our Line; Fill 1 or legacy filled material-icons → with-solid. Rounded is closest to Line (round caps and joins).
Paste your Material Symbols 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.
<span class="material-symbols-outlined">home</span> <span class="material-symbols-outlined">favorite</span> <span class="material-symbols-outlined">delete</span> <span class="material-icons">shopping_cart</span>
Turn on JavaScript to convert.
Name map: common icons
| Material Symbols | with icons |
|---|---|
home | homewith-home |
search | searchwith-search |
delete | trashwith-trash |
settings | settingswith-settings |
person | userwith-user |
mail | mailwith-mail |
close | closewith-close |
check | checkwith-check |
add | pluswith-plus |
menu | menuwith-menu |
edit | editwith-edit |
download | downloadwith-download |
upload | uploadwith-upload |
favorite | heartwith-heart |
star | starwith-star |
notifications | bellwith-bell |
calendar_month | calendarwith-calendar |
lock | lockwith-lock |
arrow_forward | arrow-rightwith-arrow-right |
keyboard_ | chevron-downwith-chevron-down |
expand_more | chevron-downwith-chevron-down |
share | sharewith-share |
content_copy | copywith-copy |
open_in_new | external-linkwith-external-link |
visibility | eyewith-eye |
filter_list | filterwith-filter |
info | info-circlewith-info-circle |
warning | alert-trianglewith-alert-triangle |
shopping_cart | shopping-cartwith-shopping-cart |
image | imagewith-image |
call | phonewith-phone |
Material Symbols icons © Google, Apache License 2.0 (vmaster), from the official package and shown only for comparison.
Find the with icons version of any Material Symbols icon
Type the Material Symbols name or just what it means (“favorite”). Search understands synonyms and typos across all 500 icons.
Click an icon to copy its <i> tag. The arrow opens its page.
No icons match yet. Try a simpler word, or browse all 500.
FAQ
Material Symbols alternative: questions
What is the best free alternative to Material Symbols?
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, Heroicons, Lucide; compare them all.
Is Material Symbols free?
Free. Licence: Apache License 2.0. (Checked 1 October 2026; see the sources below.)
How many icons does with icons have compared with Material Symbols?
with icons has 500 icons, each drawn in 20 styles (10,000 SVGs). Material Symbols: over 2,500 (“a collection of over 2,500 icons”). Material Symbols 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.
What’s the difference between Material Icons and Material Symbols?
Material Symbols is Google’s current set (since 2022) with variable-font axes; the older Material Icons set is no longer updated, according to Google’s GitHub repository. Both use the same ligature names, and both map to with icons the same way.
Sources
Where these facts come from
- Google Fonts: Material Symbols guide · developers.google.com/fonts/docs/material_symbols
- Google Fonts: Material Icons guide (legacy) · developers.google.com/fonts/docs/material_icons
- google/material-design-icons (GitHub) · github.com/google/material-design-icons
- npm: material-symbols (community package) · www.npmjs.com/package/material-symbols
- Google Fonts icons browser · fonts.google.com/icons
- Google Design MCP overview · developers.google.com/design-mcp/overview
- Material Symbols Outlined codepoints (names) · github.com/google/material-design-icons/blob/master/variablefont/MaterialSymbolsOutlined%5BFILL,GRAD,opsz,wght%5D.codepoints
Try with icons instead of Material Symbols
500 icons, 20 styles, MIT. Nothing to install to start: copy, download or drag.
Browse all icons