ICON FONTS – Wich family should I choose?

Hi!

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
Ionicons 1475+ 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

What I recommend

  • Using an Icon Font is a job that requires intermediate knowledge in “css” and “html”. If it”s not a family as complex as Font Awesome, which offers you style sheets that have customized sizes and animations, you would need to create your own library of styles to personalize the icons. Here is a link to an article that has more information on the matter.
  • With source archives (eot, otf, ttf, woff) it’s recommended to practice moderation when using numerous Font families in the same Project. My recommendation is to use one or two families that visually combine (considering weight, consistence and glyph styles). For example, “bootstrap glyphs” are compatible visually with “Font Awesome”, in fact, these two were designed to complete the bootstrap family, but both work well with other frameworks.
  • If you were curious enough, you may have noticed many families are used in specific subjects, i.e. State Face (USA Maps) or Zocial (icons with logos in main social networks). These families are very compatible as you can use them as a generic resource.

Bonus note

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.




Leave a Reply

Your email address will not be published. Required fields are marked *

Posts de Prensa Recientes