Dieter Petereit September 4th, 2012

Typicons: Free Icon Font with 88 Symbols

Stephen Hutchings from Australia undoubtedly brought forward an intelligent new term when he called his icon font Typicons. Nevertheless, Typicons are just that, an icon font, but a good one with 88 pieces. Typicons are especially useful in app-design as most of the symbols relate to user interface aspects typically needed for controlling functionality. I guess, Hutchings had development for mobile clients in mind when he created the symbols.

[caption id="attachment_71336" align="alignnone" width="549"] Typicons: only a few examples[/caption]

Typicons: a grid of 24 square pixel, but scalable to any size

Even though they have their downsides, web design without icons is unthinkable these days. Several methods of icon usage have been established. At first, icons were implemented via separate files, which led to separate http-requests for every single file. For reasons of performance optimization, modern websites should try to invoke only as many requests as absolutely unavoidable. Separate icon files have proven not to be the right method. Next came and still stay the so-called sprites. Here we have only one file which includes all the icons needed. To display a certain symbol, we use CSS to locate only a part of the whole file and show this sprite to the user. This method is established, but has its downsides too. If you'd want to serve different devices and/or different resolutions, you'd have to provide different sprite-files, which certainly means a higher effort in producing them. These would have to be targeted using media queries, which you'll not always want to use.

Freely scalable icon fonts are the cure to these pains. You don't need to worry about their resolution even on the new iPad, the new MacBook Pro or other HiDPI-screens. That's where Typicons come in.

The download weighs in at 1,6 MB and contains the necessary font files (EOT, SVG, TTF, WOFF) as well as the corresponding CSS for easy implementation into your own website. On top of this, Hutchings provides you with vector files in the formats of Adobe Illustrator and EPS (encapsulated Postscript), thus leaving nothing to be desired. Experienced designers can take and modify the icon set to open up new use cases.

Typicons are shared under a Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) license. That means they can be used free of charge for personal as well as commercial projects. You must attribute the work in the projects you use it, typically by providing a backlink. If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to the one, Hutchings shares it under. Fair enough...

Related links:

Dieter Petereit

Dieter Petereit is a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called web design and has carried on ever since. Two decades ago he started writing for several online publications, some well, some lesser known. You can meet him over on Google+.

3 comments

  1. Icon fonts are awesome. Fontello.com has quite a few different types of icon fonts (including Typicons) and is great for web designers because you can customise your own font. I just found out about it last week…and I love it :D

Leave a Reply

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