The provided usage example is bad for accessibility: the name of the icon, e.g. ”check_circle”, will be announced by screen readers. If there is other contextual information that explains the icon, the icon can be hidden from screen readers using aria-hidden=”true”. However, in cases where the icon appears stand-alone, it needs to contain a human-understandable text that explains its meaning.
Also, never use Google’s CDN for loading fonts or icons — always self-host them. The CDNs are used to track your users.
And special-purpose-font/script CDNs don't improve load times any more because browser caches are partitioned by domain nowadays. So using a CDN for fonts or scripts just increases your downtime probability and your GDPR headaches.
“Check-circle” is exactly the amount of information that the able reader has. Sight-deficient users are as much used to those weird words as able users are used to unintelligible icons.
The real benefit here is that you can export these as SVG. Please do this instead. Icon fonts are convenient, but they're really bad for web performance. It needs to download the entire font even if there's only a handful of icons on a page.
SVGs have excellent browser support, and decent CMS support. You can enable them in Wordpress for example with a little tinkering. If you want to make your site faster (and I hope you do), then definitely consider SVGs.
Semi related but there was a HN post a few weeks back about a tool that would scan your site and then modify the font file to only include the characters or icons you actually used. I still think SVGs are a better option.
where the font is expected to ligate the characters 'f', 'a', 'c', 'e' into a single <face> glyph.
This can be problematic on the web, as it means that if a user doesn't get your webfont for any reason (download failed, browser settings that disable webfonts, accessibility options that override fonts for clarity, etc) the entire word will appear in a fallback font, often totally disrupting the layout. (Can your site adapt nicely to a word, or even an entire phrase -- e.g. "format list bulleted" -- appearing in the toolbar where you expected a single icon?)
Also, most of the time icons should instead fall back to nothing (and should be hidden from screen readers). The main exception that one will observe in reality is a toolbar of icons only with no labels; it’s well understood in usability circles that that’s a dangerous pattern at best—text labels and icon-and-text labels both almost always simply work better.
I deem the ligature approach bad because it encourages leaving something in the document and accessibility tree that shouldn’t be there, and most commonly in a non-semantic way (e.g. a send button might end up showing something like “paper airplane”, which is terrible, or with this specific font, “Learn more →” might become “Learn more arrow_right_alt”), or with semantics that you’ll definitely break at some point (e.g. report_problem is , but if you use that for an alert icon it’ll mislead anyone that ends up reading report_problem; in short, any new semantics you desire for an icon, you need to create a new ligature for it if the user can possibly ever be exposed to it).
Something I still find hilarious is that after a product I worked on started to enforce a content security policy, the #1 blocked source was always for google font resources. Of course users could whitelist the domains, but many didn't and anyway their sites looked fine.
To illustrate an issue this article describes, https://i.imgur.com/TzMXgUd.png is what the linked page looks like with a forced/limited font selection on Firefox.
Wow. I wonder what this means for the future of Font Awesome.
I know plenty of people are anti-Google, and also prefer SVG's over icon fonts for valid reasons (though you can download these as SVG's as well).
But now that this is easier to embed than Font Awesome, has basically the same number/range of icons as Font Awesome's free tier, doesn't come with the 10K pageviews/mo. restriction that Font Awesome's free tier comes with, and so many sites already use Google Fonts for their display and/or body text...
...I'd be very surprised if this doesn't quickly become the new de-facto standard icon font.
Font Awesome’s product has long been destined for commoditization. Which is probably why they have diversified to offering custom icons and other differentiating behavior.
I suspect google won’t be the only one to offer icon sets like this, so in general I agree this will continue to erode FA’s market share.
Fwiw, It has felt like FA’s most recent release fell far behind schedule.
I am sorry but I am going to be that guy. Iconography has regressed so much, it's all the same optically to me. Designers keep pushing minimalism and line-graphics to "reduce crud" like its some sort of a religion. We can't distinguish icons well. There is no effort put into making them more unique and recognizable. What a horrible cult.
We love to see someone take Fam Fam Fam icons and create SVG versions of them. Iconography takes time and effort and enormous amount of patience, skill. You can't do this in a week in illustrator which is how it seems most icons are designed today. We've become lazy, want free stuff and no one is incentivized to spend 2 years creating amazing icons. The market for paid icons doesn't exist and we've done this to ourselves because we're addicted to free stuff.
Google services icons? All impossible to tell apart now. Apple macOS dock? They use to be different shapes and sizes, now they are all chicklet squares in macOS Big Sur. Apple fired the guy (Forstall) that was the brilliant mind behind Apple's approach to UI way back in 2013. Since then, Apple UI design sucks.
It is all getting worse, day by day, icon by icon. Iconography was a discipline people took seriously before 2010's. Windows 95, 98, XP icons were so amazing. They thought deeply about it. No one gives a shit anymore.
I deal with a lot of legacy interfaces with brightly colored icons and they can be just as confusing if not more confusing than minimalist icons. But I think people have a survivorship bias (we remember the good examples over the bad ones), as well as a familiarity bias (I like the things I grew up using!).
I think the benefit of flat, monochrome designs is that they force you to offload meaning into the layout and flow of the application. You actually have to pick out a nice, meaningful spot to put the button, and make sure it makes sense in the context, and make sure users can discover it easily. Compare that to an open source application that just throws a bright green plus sign at the end of a row of icons and expects you to know what it does.
On the one hand, I absolutely agree with you. I tremendously lament the fact that outline, color, and shading have been thrown out so now we're trying to decipher little rounded-box hieroglyphics based on lines being subtly different.
But on the other hand, the problem is that icons took so much work to create before, and also because they had such a recognizable identity/brand they weren't easy to reuse. Now the icons are so generic that they might as well be letters of the alphabet. They kinda are. A right-arrow is just a right-arrow -- it's not a Microsoft Office style right-arrow, or Windows 95 style right-arrow, or Mac Aqua style right-arrow, etc.
These icon fonts make sense for when the icon is meant to be essentially decorative typography -- e.g. a share icon next to the word "share" or an "opens in new tab" link arrow. They work very well for websites.
However, I hate these icon fonts when they're used without a text label besides them -- specifically in toolbars. That's where I wish desperately we could go back to colorful textured icons that were easy to tell apart. Even after years, I still find Gmail's toolbar of monochrome blob icons to be entirely unusable for this reason.
What is it with HN being so hostile towards design?
So many smart designers are carefully considering how to make genuinely ideal interfaces.
But fuck them, they're just too lazy to put effort into complex interfaces, they're just following trends. They don't know what there doing. But Winamp-Themes where you can barely even see the buttons - yes, those are great.
Sure, mistakes are made, and overcorrections happen. Everyone was tired of skeuomorphism a while ago (ironically, OP seems to have forgotten that). The response was a vast overcorrection and we're still recovering from that. But if you honestly think that we're off worse now, then I can only shake my head.
(EDIT) But why is this hostility so prevalent in the developer demographic? Apparentlyy everyone else is okay. (unless you want to argue that there is some secret designer cult that imposes their will on everyone). Is it age? Are we just damaged from looking at a terminal too much?
> Google services icons? All impossible to tell apart now.
Google went for maximum idiocy when they tried to use logos to serve two distinct roles: branding and utility. Which is why they look like complete unreadable ass.
They forgot the simple fact that if you want branding, logos must look unique. And if you want utility, icons must be representative. It's a classic case of wanting impossible design. I suspect there were no actual designers involved in the top-level direction at all. I've certainly done worse things for a paycheck.
I think most UI and industrial design has regressed a lot in recent years. Two big issues are:
1. Obsession with "minimalism" and "clean design". Taken to the extreme by Jony Ive, where we started fearing what else Apple would take away in new revisions of their hardware and software. Scrollbars disappeared, buttons started blending into the background or becoming invisible, everything was "clean", utterly undiscoverable, and annoying to use. It only looked good in the keynote demo.
2. Fashion. Designers love following other designers and fashion trends run rampant. That's why on our phones we are beginning to get a bunch of icons that all look the same, every one is an abstract geometric pattern using at least 4 saturated colors. And we can't tell them from one another.
I am so hoping for a reversion of both trends. You don't have to design like everybody else!
Minimalism has a place — esp. with reduced screen real-estate. An icon I would display in my tool bar or on a button is different than an icon I would display on the desktop.
My beef with Google's icons is the seeming random decision to use rounded miters on some art, sharp miters on others. Very mish-mash.
Ok, your comment made me open the site instead of just taking a glance at the comments and moving on.
When I got there, the icons were... actually not that bad. They have very diverse outlines (even more than your example), large features (again, more than your examples), and very precise meanings. Why do you say they are hard to tell apart?
The only thing missing is color and gradients, but that is for good reason, as hard-coded colors do interfere with usability and accessibility, and currently we have no way to encode color independent gradients (that's a huge oversight, by the way).
You seem to be confusing these Google Font icons with app icons (Google services, macOS dock icons). The former are meant to be simple, resizeable, used by other apps, work in dark/light mode, and able to be part of any design language. Compare them with Apple's SF Symbols.
I am going to heavily agree. The current set of useless garbage is not different from the next. And any and all creativeness is sirens in copying and being like apple and google.
The flat abstractions are garbage that only a selected few understand. Instead of being a language that is representative of something, literally the meaning of "icon", it is a flat 2d projections of a 3d shape in a 2 color scheme.
A floppy disk became the icon for saving because it represented "write to disk". Now, it would be a square in the name of flat ness and easy to read or some other optimization. This is not to be conflated with survivorship bias.
Not a fan of how the entire page is squished when clicking on an icon. All the icons get displaced and it's a pain to find where you were in the list...
Are Google serious? Simultaneously pushing websites to be highly efficient (Core Web Vitals), at the same time as introducing the methods that can make them less efficient.
Also, about these icons, they mention "please don’t try to sell them", immediately followed by "Apache license 2.0". Well, Google, which is it? Do they actually mean to say "you have permission to sell them, but please don't?"
This looks like it was created for Android app developers. Having a single set of most used icons across different apps improves consistency, which will be welcomed by the users.
Google Fonts used to have this great feature where I can select a number of fonts and view them all on a single page. It was super useful because I can type in any text and preview the text in these selected fonts.
However, I can't seem to find this feature any more. Right now if I select fonts, they just show up in the sidebar. But I can preview them in any way.
Sounds a bit like MAUI* for dotnet... I'm very skeptical about one framework / project to solve UI problems on all common platforms but it is nice to see, that there is effort to improve the developer experience in more than one language.
I like that the SVGs are available under the Apache license. Because of that, I may actually get some use out of these.
Does anyone know if Apple's SF Symbols are available under a similar license? I looked at Apple's web site, and it only mentions not using them in trademarks.
[+] [-] eurasiantiger|5 years ago|reply
Also, never use Google’s CDN for loading fonts or icons — always self-host them. The CDNs are used to track your users.
[+] [-] corty|5 years ago|reply
[+] [-] laurent92|5 years ago|reply
[+] [-] eek04_|5 years ago|reply
Any evidence of this claim? Also, given that the Google CDNs allow caching for 24h, it seems extremely ineffective even if it was done.
[+] [-] panarky|5 years ago|reply
Is there evidence of this or is it just your conjecture?
[+] [-] charcircuit|5 years ago|reply
Why? It's the screen reader's job to inform users of what's on their screens. It's not my job to give descriptions to things.
>The CDNs are used to track your users.
Do you have any evidence to support this claim?
[+] [-] SquareWheel|5 years ago|reply
SVGs have excellent browser support, and decent CMS support. You can enable them in Wordpress for example with a little tinkering. If you want to make your site faster (and I hope you do), then definitely consider SVGs.
[+] [-] EveYoung|5 years ago|reply
[+] [-] ficklepickle|5 years ago|reply
For example, this[0] page loads too slowly on low-end mobile, even though each individual SVG is aggressively optimized to be a tiny file size.
I need to replace them with PNG/WebP. The file sizes would increase, but overall performance would be better (I have tested this).
Now these are illustrations, which are more complex than icons.
0 - https://justtrivia.fun/categories
[+] [-] pests|5 years ago|reply
[+] [-] jfk13|5 years ago|reply
This can be problematic on the web, as it means that if a user doesn't get your webfont for any reason (download failed, browser settings that disable webfonts, accessibility options that override fonts for clarity, etc) the entire word will appear in a fallback font, often totally disrupting the layout. (Can your site adapt nicely to a word, or even an entire phrase -- e.g. "format list bulleted" -- appearing in the toolbar where you expected a single icon?)
[+] [-] chrismorgan|5 years ago|reply
I deem the ligature approach bad because it encourages leaving something in the document and accessibility tree that shouldn’t be there, and most commonly in a non-semantic way (e.g. a send button might end up showing something like “paper airplane”, which is terrible, or with this specific font, “Learn more →” might become “Learn more arrow_right_alt”), or with semantics that you’ll definitely break at some point (e.g. report_problem is , but if you use that for an alert icon it’ll mislead anyone that ends up reading report_problem; in short, any new semantics you desire for an icon, you need to create a new ligature for it if the user can possibly ever be exposed to it).
[+] [-] tobyhinloopen|5 years ago|reply
[+] [-] dragonwriter|5 years ago|reply
[+] [-] wgx|5 years ago|reply
I added these lines to uBlock:
Occasionally some icons break on a few sites, but mostly it's plain sailing.[+] [-] Jach|5 years ago|reply
[+] [-] mnadkvlb|5 years ago|reply
thanks
[+] [-] matkoniecz|5 years ago|reply
[+] [-] Shadonototro|5 years ago|reply
this font is quite small
[+] [-] TonyTrapp|5 years ago|reply
[+] [-] nagisa|5 years ago|reply
[+] [-] bagacrap|5 years ago|reply
[+] [-] crazygringo|5 years ago|reply
I know plenty of people are anti-Google, and also prefer SVG's over icon fonts for valid reasons (though you can download these as SVG's as well).
But now that this is easier to embed than Font Awesome, has basically the same number/range of icons as Font Awesome's free tier, doesn't come with the 10K pageviews/mo. restriction that Font Awesome's free tier comes with, and so many sites already use Google Fonts for their display and/or body text...
...I'd be very surprised if this doesn't quickly become the new de-facto standard icon font.
[+] [-] bredren|5 years ago|reply
I suspect google won’t be the only one to offer icon sets like this, so in general I agree this will continue to erode FA’s market share.
Fwiw, It has felt like FA’s most recent release fell far behind schedule.
[+] [-] ChrisArchitect|5 years ago|reply
https://material.io/blog/google-fonts-material-icons
[+] [-] systemvoltage|5 years ago|reply
Check out these glorious past remnants that we've forgotten about, they were so uhhh iconic : http://www.famfamfam.com/lab/icons/
We love to see someone take Fam Fam Fam icons and create SVG versions of them. Iconography takes time and effort and enormous amount of patience, skill. You can't do this in a week in illustrator which is how it seems most icons are designed today. We've become lazy, want free stuff and no one is incentivized to spend 2 years creating amazing icons. The market for paid icons doesn't exist and we've done this to ourselves because we're addicted to free stuff.
Google services icons? All impossible to tell apart now. Apple macOS dock? They use to be different shapes and sizes, now they are all chicklet squares in macOS Big Sur. Apple fired the guy (Forstall) that was the brilliant mind behind Apple's approach to UI way back in 2013. Since then, Apple UI design sucks.
It is all getting worse, day by day, icon by icon. Iconography was a discipline people took seriously before 2010's. Windows 95, 98, XP icons were so amazing. They thought deeply about it. No one gives a shit anymore.
[+] [-] legitster|5 years ago|reply
I deal with a lot of legacy interfaces with brightly colored icons and they can be just as confusing if not more confusing than minimalist icons. But I think people have a survivorship bias (we remember the good examples over the bad ones), as well as a familiarity bias (I like the things I grew up using!).
I think the benefit of flat, monochrome designs is that they force you to offload meaning into the layout and flow of the application. You actually have to pick out a nice, meaningful spot to put the button, and make sure it makes sense in the context, and make sure users can discover it easily. Compare that to an open source application that just throws a bright green plus sign at the end of a row of icons and expects you to know what it does.
[+] [-] crazygringo|5 years ago|reply
But on the other hand, the problem is that icons took so much work to create before, and also because they had such a recognizable identity/brand they weren't easy to reuse. Now the icons are so generic that they might as well be letters of the alphabet. They kinda are. A right-arrow is just a right-arrow -- it's not a Microsoft Office style right-arrow, or Windows 95 style right-arrow, or Mac Aqua style right-arrow, etc.
These icon fonts make sense for when the icon is meant to be essentially decorative typography -- e.g. a share icon next to the word "share" or an "opens in new tab" link arrow. They work very well for websites.
However, I hate these icon fonts when they're used without a text label besides them -- specifically in toolbars. That's where I wish desperately we could go back to colorful textured icons that were easy to tell apart. Even after years, I still find Gmail's toolbar of monochrome blob icons to be entirely unusable for this reason.
[+] [-] SebastianKra|5 years ago|reply
So many smart designers are carefully considering how to make genuinely ideal interfaces.
But fuck them, they're just too lazy to put effort into complex interfaces, they're just following trends. They don't know what there doing. But Winamp-Themes where you can barely even see the buttons - yes, those are great.
Sure, mistakes are made, and overcorrections happen. Everyone was tired of skeuomorphism a while ago (ironically, OP seems to have forgotten that). The response was a vast overcorrection and we're still recovering from that. But if you honestly think that we're off worse now, then I can only shake my head.
(EDIT) But why is this hostility so prevalent in the developer demographic? Apparentlyy everyone else is okay. (unless you want to argue that there is some secret designer cult that imposes their will on everyone). Is it age? Are we just damaged from looking at a terminal too much?
[+] [-] deckard1|5 years ago|reply
Google went for maximum idiocy when they tried to use logos to serve two distinct roles: branding and utility. Which is why they look like complete unreadable ass.
They forgot the simple fact that if you want branding, logos must look unique. And if you want utility, icons must be representative. It's a classic case of wanting impossible design. I suspect there were no actual designers involved in the top-level direction at all. I've certainly done worse things for a paycheck.
[+] [-] jwr|5 years ago|reply
1. Obsession with "minimalism" and "clean design". Taken to the extreme by Jony Ive, where we started fearing what else Apple would take away in new revisions of their hardware and software. Scrollbars disappeared, buttons started blending into the background or becoming invisible, everything was "clean", utterly undiscoverable, and annoying to use. It only looked good in the keynote demo.
2. Fashion. Designers love following other designers and fashion trends run rampant. That's why on our phones we are beginning to get a bunch of icons that all look the same, every one is an abstract geometric pattern using at least 4 saturated colors. And we can't tell them from one another.
I am so hoping for a reversion of both trends. You don't have to design like everybody else!
[+] [-] JKCalhoun|5 years ago|reply
My beef with Google's icons is the seeming random decision to use rounded miters on some art, sharp miters on others. Very mish-mash.
[+] [-] marcosdumay|5 years ago|reply
When I got there, the icons were... actually not that bad. They have very diverse outlines (even more than your example), large features (again, more than your examples), and very precise meanings. Why do you say they are hard to tell apart?
The only thing missing is color and gradients, but that is for good reason, as hard-coded colors do interfere with usability and accessibility, and currently we have no way to encode color independent gradients (that's a huge oversight, by the way).
[+] [-] dangwu|5 years ago|reply
[+] [-] ashneo76|5 years ago|reply
The flat abstractions are garbage that only a selected few understand. Instead of being a language that is representative of something, literally the meaning of "icon", it is a flat 2d projections of a 3d shape in a 2 color scheme.
A floppy disk became the icon for saving because it represented "write to disk". Now, it would be a square in the name of flat ness and easy to read or some other optimization. This is not to be conflated with survivorship bias.
[+] [-] momothereal|5 years ago|reply
[+] [-] jfoster|5 years ago|reply
Also, about these icons, they mention "please don’t try to sell them", immediately followed by "Apache license 2.0". Well, Google, which is it? Do they actually mean to say "you have permission to sell them, but please don't?"
[+] [-] throwaway3699|5 years ago|reply
[+] [-] joshgoldman|5 years ago|reply
[+] [-] a1o|5 years ago|reply
[+] [-] Phillips126|5 years ago|reply
Tons of SVG icons from popular packs and using ES6 imports, you only bundle the icons you use.
[+] [-] viktorcode|5 years ago|reply
[+] [-] vagab0nd|5 years ago|reply
However, I can't seem to find this feature any more. Right now if I select fonts, they just show up in the sidebar. But I can preview them in any way.
There's gotta be something that I missed?
[+] [-] sandreas|5 years ago|reply
* https://github.com/dotnet/maui
[+] [-] reaperducer|5 years ago|reply
Does anyone know if Apple's SF Symbols are available under a similar license? I looked at Apple's web site, and it only mentions not using them in trademarks.
[+] [-] stevewillows|5 years ago|reply
[+] [-] unknown|5 years ago|reply
[deleted]
[+] [-] emarthinsen|5 years ago|reply
[+] [-] Macha|5 years ago|reply
What would a generic icon for a tweet be that differs from a "message" icon?
[+] [-] tonoto|5 years ago|reply