This post will be focused on detailing the attributes of the main font families of Icon Fonts available in the web, but before we must understand; what an icon font is. Icon fonts are icons used as typographical fonts, whether they are letters, numbers or Unicode characters.
Due to the continues improvement of monitor resolutions, the use of icon sprites and standalone images has been put aside and the usage of icon fonts in web pages and apps has risen. However, choosing a font family adequate to the style and needs of your page requires some knowledge.
For this reason, I share this brief benchmark where you will see the most known Font families along with their most relevant attributes that may help you select the right one and download it from the related link:
|Icon Font||Updates||Glyphs number||Price||Licence||Download||Style sheets||Allow contributions||Link|
|Font Awesome||605+||Free||MIT Licensed||Immediate||Yes, it also has animation style sheets|
|Material Design Icons||733||Free||MIT Licensed||Immediate|
|Icomoon||490||Free Pack ” Price Pack||GPL / CC BY 4.0||Registration required|
|Typicons||336||Free||Free for commercial use||Immediate|
|Foundation Icon Fonts||336||Free||Free for commercial use||Immediate|
|Open Iconic||223||Free||Free for commercial use||Immediate|
|Rondo||40||Free||Free for commercial use||Immediate|
|Meteocons||41||Free||Free for commercial use||Immediate|
|Soicon||105||Free||SIL Open Font License||Immediate|
|Vaadin Icons||530||Free||CC-BY license||Immediate|
|Batch||300+||Free Pack ” Price Pack||Free for commercial use||Immediate|
|Fontelico||34||Free||SIL licence||Git Download|
|Zocial||103||Free||Free for commercial use||Git Download|
|State Face||152||Free||Free for commercial||Immediate|
|Open Web Icons||219||Free||Free for commercial||Immediate|
|Sosa||160||Free||Free for commercial||Immediate|
|RaphaÃ«l Icon-Set||160||Free||Free for commercial||Immediate|
|JustVector||151||Free||Free for commercial||Immediate|
|Web Symbols||100+||Free||Free for commercial||Immediate|
|Pictonic||332||Free||GPL / CC BY 4.0||Registration required|
|Octicons||176||Free||Free for commercial||Immediate|
To have a better understanding about the benefits of using Icon Fonts, I’ll leave this article of CSS-TRICKS, you will find interesting examples live and direct. Also from CSS-TRICKS, I want to share this interesting link where you will also find paid font families you can use.
Finally, I want to leave this post open with the following question: Do you know other families of Icon fonts? If so, share with us the link so we can add it to our gallery.