with icons vs Material Symbols: Google’s look, or your look?

On this page 13 sections

Material Symbols vs with icons, in one breath: use Google’s Material Symbols if your app follows Material Design or Android and you want over 2,500 icons with adjustable fill and weight. Use with icons if you want everyday icons that look like your own brand, in 20 matching styles, ready to copy into slides, docs and websites. Both are free for commercial use, and neither asks for a credit.

If you have used an Android phone, you have seen Material Symbols thousands of times. So when should you use something else? Here are the trade-offs, without the jargon.

How do Material Symbols and with icons compare?

with icons and Material Symbols, side by side (checked October 2026)

	with icons	Material Symbols
Made by	The with icons team (Powered by Evergrow)	Google
Price	Free	Free
Licence	MIT, no credit needed	Apache 2.0, credit appreciated but not required
Number of icons	500 icons × 20 styles = 10,000 SVGs	Over 2,500 icons
Styles	20: line, solid and duo for interfaces, plus 17 creative styles such as glass, pixel, retro and luxe	3: Outlined, Rounded, Sharp, plus adjustable fill and weight
Colour	20-30 hand-picked palettes per icon for the multi-colour styles	One colour at a time
Look	Neutral, not tied to one company	Google’s Material Design look
Main format	SVG files, components and CSS classes	A variable icon font, plus SVG and PNG downloads
Slides and docs	Copy image, PNG and SVG downloads in any colour	SVG and PNG downloads
Help for AI assistants	llms.txt, agent skill, MCP server	Google’s Design MCP uses Material Symbols by default

What do Material Symbols look like next to with icons?

Twelve everyday icons: ours on top, Google’s real Material Symbols (from its official GitHub repository) underneath, each with its name.

with icons · LineMaterial Symbols · Outlined

homehome

searchsearch

settingssettings

userperson

bellnotifications

mailmail

heartfavorite

trashdelete

calendarcalendar_today

shopping-cartshopping_cart

starstar

downloaddownload

with icons · SolidMaterial Symbols · Outlined, filled

homehome

searchsearch

bellnotifications

heartfavorite

calendarcalendar_today

downloaddownload

What are Material Symbols, in plain words?

Material Symbols is Google’s official icon collection, made to go with Material Design, the visual language behind Android and most Google products. Google describes it as a collection of over 2,500 icons, and it is free for anyone to use.

It comes in three styles. Outlined is the clean default. Rounded has soft corners and feels a bit friendlier. Sharp has crisp square corners and feels more serious. Every icon exists in all three. There is also an older set called Material Icons, which Google stopped updating in 2022 when Material Symbols arrived, so for anything new, Material Symbols is the one to look at.

What is a variable font, and why does Google use one?

Here is the clever bit. Material Symbols is delivered mainly as a font: a file your website loads, where each “letter” is an icon. You type a name like home or favorite inside a special tag and the browser swaps the word for the picture you saw in the face-off above.

And it is a variable font, which means it has built-in sliders. Instead of downloading a separate file for every variation, you turn dials:

• Fill: outline (0) or completely filled (1).
• Weight: line thickness, from thin (100) to bold (700).
• Grade: small thickness tweaks, handy for dark backgrounds, roughly from -50 to 200.
• Optical size: fine-tunes the drawing for small or large use, from 20 to 48.

For app designers this is genuinely great.

How is with icons different?

with icons takes the opposite path. Instead of one design language with sliders, we drew 500 everyday icons once each on a 24 × 24 grid, then rendered every drawing into 20 styles that feel very different from each other. You do not tweak dials; you pick a mood. Compare the two families below.

Material Symbols: the styles you get

Outlined

Rounded

Sharp

Outlined, filled

Line

Solid

Duo

Gloss

Engrave

Blueprint

Sketch

Glass

Kawaii

Sticker

Pixel

Retro

Bauhaus

Luxe

Skeuo

Anime

Coquette

Gothic

Pastel

Plush

Line style, Solid style and Duo style are the three everyday interface styles, made for apps and websites. The other 17 are creative styles, more like small illustrations: frosted Glass style, 16-bit Pixel style, 70s Retro style, cute Kawaii style and gold-and-enamel Luxe style, among others. Use them for hero sections, presentations and posters, at 32px or larger. Each icon also comes with 20 to 30 hand-picked colour palettes that recolour every multi-colour style at once.

500

icons, hand-drawn once

20

styles from each drawing

10,000

matching SVG files

0

credits or sign-ups needed

Will Material Symbols make my product look like a Google app?

Material Symbols is beautiful, but it is also very recognisable. If your app is for Android, that is a plus: people feel at home. If you are building a brand of your own, a bakery website, a fintech dashboard, a school portal, it can make your product feel a little like a Google template.

with icons is not tied to any company’s design system. The line style is calm and neutral, and the duo style adds a soft colour tint that makes dashboards feel warmer without shouting.

layout-dashboardchart-piewalletcalendar-checkusersbell

Are Material Symbols and with icons free for commercial use?

Yes, and this is a happy part of the comparison: neither set has a paid tier, and neither makes you add a visible credit.

Material Symbols: Apache 2.0

Apache 2.0 is a well-known open-source licence. You can use the icons in apps, websites, client work and products you sell. Google says it would love a mention in your app’s about screen, but that this is not required. If you redistribute the icon files themselves, keep the licence text with them.

with icons: MIT

MIT is one of the shortest and most relaxed licences there is. Use the icons anywhere, commercially or not, and never show a credit. If you share the source files, keep the licence file with them. The details are on our license page, and our guide to using free icons commercially explains the common licences side by side.

Which is easier for slides and documents?

Many people searching for icons are making a pitch deck, a report or a Canva poster, not an app. Google’s icon browser lets you pick a symbol, adjust its settings and download it as SVG or PNG. It works well, although you get one colour at a time and then insert the file.

with icons was built with this crowd in mind. Every icon page has a Copy image button, so you can paste straight into a slide, plus PNG downloads in any size and colour and an SVG download. We also wrote step-by-step guides for PowerPoint, Google Slides, Canva, Notion and more.

1. 1
   Search in plain words

   Open the library and type what you mean, like “money”, “team” or “bin”.

2. 2
   Choose a style and colour

   Gloss or sketch for a title slide, line for a tidy agenda slide.

3. 3
   Copy and paste

   Press Copy image, then paste into your slide. That is it.

Which is easier on a website or in an app?

With Material Symbols, the classic setup is to load the font from Google and write the icon’s name inside a tag, for example <span class="material-symbols-outlined">favorite</span> for the heart in the face-off above. It is quick, but most React and Vue packages for Material Symbols come from the community, since Google mainly ships the font and the files.

with icons offers plain SVG code on every icon page today, a simple class pattern (<i class="with with-heart">), a <with-icon> web component and components for React, Vue, Svelte, Angular and Solid. The packages are on npm (for example npm i @withicons/react) and the jsDelivr CDN, or you can copy the SVG from any icon page and paste it into your code.

Which works better with AI assistants?

If you ask an AI assistant to build a page, it needs to know real icon names. Google offers a Design MCP server (a plug-in that gives AI tools access to Google’s design resources), and its icon support defaults to Material Symbols. with icons has its own MCP server, llms.txt and agent skill, so assistants can search the actual 500 icons instead of guessing. Our post on AI assistants and icons goes deeper.

What are the pros and cons of Material Symbols and with icons?

Tables are handy, but they hide the “why”. Here is each set’s honest strong and weak side, in plain words, including ours.

Material Symbols

What’s great

A huge catalogue. Google lists over 2,500 icons, about five times our 500. If you need a rare idea, like a specific device or a settings screen detail, it is probably there.

Sliders built in. The variable font lets you change fill, weight, grade and size without new files. A tab icon can switch smoothly from outline to filled when someone taps it.

Three styles for every icon. Outlined, Rounded and Sharp each cover the whole set, so you can soften or sharpen your app without swapping libraries.

Free, with no credit required. The Apache 2.0 licence allows commercial use. Google appreciates a mention but does not require one.

Feels native on Android. Because it is Google’s own design language, Android users recognise it instantly, and Google’s Design MCP uses it by default.

What to keep in mind

It looks like Google. The style is so familiar that your product can feel like a Google template rather than its own brand.

The full font is heavy. Google’s guide shows around 295 KB for the default font and several megabytes with every slider. You can trim it, but that is an extra step.

Words can flash before icons. While the font loads, visitors may briefly see “favorite” or “delete” as text instead of the icon. Google’s guide explains a setting that hides it, but you have to apply it.

One mood, three variations. Outlined, Rounded and Sharp are close relatives. There is no hand-drawn, glossy or illustrated option for slides and posters.

with icons

What’s great

20 real styles from one drawing. Line, solid and duo for apps, plus 17 creative styles, from glass and sketch to pixel, retro and luxe, for slides and hero sections. They always match because they share one drawing.

No credit, ever. The MIT licence lets you use the icons in personal and commercial work without showing a credit line anywhere.

Made for slides and docs. Every icon page has Copy image, plus PNG downloads in any size and colour and an SVG download, with guides for PowerPoint, Canva and more.

Search in everyday words. Type “bin” and you get trash, type “gear” and you get settings. You do not need to learn names like delete or favorite.

A neutral look. The icons are not tied to any company’s design system, so they take on your brand’s colours and personality.

What to keep in mind

A smaller catalogue. With 500 icons, we cover everyday needs well, but rare or very technical ideas may be missing. We also have no brand logos.

Web only. There is no Android, iOS or Flutter package and no icon font, so native apps need the SVG files instead.

Newer, with a smaller community. Material Symbols has years of tutorials and community add-ons. with icons is younger, so there are fewer answers online for now.

Creative styles need room. The 17 creative styles, like gloss, glass and pixel, are made for 32px and larger. For tiny interface icons, stick to line, solid or duo.

Who each suits: Material Symbols fits Android apps, Material Design projects and teams who need a very wide catalogue with live sliders. with icons fits founders, marketers, teachers and small product teams who want everyday icons that look like their own brand across a website, a dashboard and a slide deck.

Which one should you pick?

Pick with icons if…

• You want a look that belongs to your brand, not to Google.
• You want 20 styles, from calm line to glossy, pixel and hand-drawn, that always match.
• You make slides, docs and websites and want one-click Copy image, PNG and SVG.
• You want a small, easy-to-browse set with plain MIT terms.

Pick Material Symbols if…

• You build for Android or follow Material Design closely.
• You need more than 2,500 icons from a single maker.
• You want a variable font with adjustable fill and weight.

How do I switch from Material Symbols to with icons?

Start with the icons you use most. Our Material Symbols alternative page has a name map (like favorite to heart and delete to trash), and the face-off above shows how each pair looks. Then pick one style for your interface, usually line, and keep the creative styles for slides and banners. Our guide to icon styles helps you choose.

Frequently asked questions

Is Material Symbols free for commercial use?

Yes. Google publishes Material Symbols under the Apache License 2.0, which allows commercial use. Google says attribution is appreciated (for example on an app’s about screen) but not required.

What is the difference between Material Icons and Material Symbols?

Material Symbols is Google’s current set, introduced in 2022, built on a variable font with adjustable fill, weight, grade and optical size. The older Material Icons set is no longer updated, according to Google’s GitHub repository.

What is the Material Symbols name for the heart, trash and user icons?

Material Symbols names icons by what they do. The heart is “favorite”, the trash can is “delete”, the user is “person” and the bell is “notifications”. In with icons they are simply heart, trash, user and bell, and search also understands everyday words like “bin” or “gear”.

Can I use Material Symbols in PowerPoint or Google Slides?

Yes. Google’s icon browser lets you download each symbol as SVG or PNG, which you can insert into slides. with icons also offers a Copy image button, so you can paste an icon straight into a slide in any colour.

Does with icons have a filled version like Material’s Fill setting?

Yes. The Solid style is the filled version of every icon, and Duo adds a soft tinted fill under the outline. Because all 20 styles come from one drawing, the filled and outlined versions always line up.

Will my app look like a Google app if I use Material Symbols?

It can. Material Symbols is designed to match Google’s Material Design, so people often recognise the style. That is great for Android apps and less great if you want a distinct brand. Picking the Rounded or Sharp style and adjusting weight helps a little.

Sources and notes

1. Google Fonts: Material Symbols guide (count, axes, licence, loading, font size)
2. google/material-design-icons on GitHub (licence, attribution, legacy set, the SVGs shown here)
3. Google Fonts icon browser (icon names, SVG and PNG downloads)
4. Google Design MCP overview
5. 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.