Ask HN: What are your favourite free icon web fonts?
Looking for a decent & free icon web font for an open source project. What icon fonts do you <3?
3 comments
Use something like https://icomoon.io and just mix-n-match between sets. Personally I've found that no one set covers everything I need (though I generally default back to the Material Design font), and there are enough sets with a similar aesthetic that you can still achieve a consistent look.
http://fortawesome.github.io/Font-Awesome/
If you use css frameworks like Foundation or Bootstrap they come with their own set of font icons as well.
If you use css frameworks like Foundation or Bootstrap they come with their own set of font icons as well.
We've used Bootstrap's free icons by Glyphicons they're pretty nice, and we considered buying a licence for the full set but the redistribution terms weren't clear enough (i.e. do people we sell our software to also need to buy a licence from Glyphicons?).
Font Awesome are alright, but the quality felt like a step backwards from Glyphicons.
We wound up going with Google's Material Design icon set[0][1]. Released under Creative Commons, and can either be self hosted or can utilise Google's CDN. Has a nice selection, and can be rendered via SVG, PNG, or an i tag e.g. <i class="material-icons">alarm</i>. Only requires a single reference to the font file to start utilising.
The only downside with Google's Material Design icon set is that it has compatibility issues with Internet Explorer 9 and older. For older IE support, instead of writing pretty HTML like:
<i class="material-icons">face</i>
You write nonsense like this:
<i class="material-icons"></i>
Eww. But since our project breaks in IE9 anyway, we could utilise their font library AND use the prettier style of HTML. So no big downside to us.
The fonts are easy to stylise and Google provides a few recommended CSS styles (e.g. md-dark, md-18, md-light, etc) on the developer page.
[0] https://google.github.io/material-design-icons/
[1] https://www.google.com/design/icons/
Font Awesome are alright, but the quality felt like a step backwards from Glyphicons.
We wound up going with Google's Material Design icon set[0][1]. Released under Creative Commons, and can either be self hosted or can utilise Google's CDN. Has a nice selection, and can be rendered via SVG, PNG, or an i tag e.g. <i class="material-icons">alarm</i>. Only requires a single reference to the font file to start utilising.
The only downside with Google's Material Design icon set is that it has compatibility issues with Internet Explorer 9 and older. For older IE support, instead of writing pretty HTML like:
<i class="material-icons">face</i>
You write nonsense like this:
<i class="material-icons"></i>
Eww. But since our project breaks in IE9 anyway, we could utilise their font library AND use the prettier style of HTML. So no big downside to us.
The fonts are easy to stylise and Google provides a few recommended CSS styles (e.g. md-dark, md-18, md-light, etc) on the developer page.
[0] https://google.github.io/material-design-icons/
[1] https://www.google.com/design/icons/