Typicons – 308 pixel perfect, all-purpose vector icons

Typicons are free-to-use vector icons embedded in a webfont for easy use in your user interfaces, whether it be on the web or in a native application.

The set of icons are available on Github, with everything included from the source files in SVG format to the minifed CSS. You can even use this project to build your own custom version of Typicons! Find out more here.




This version greatly improves Typicons, with the addition on 220 icons with solid and outline styles and Github hosting of the source content. So what are you waiting for? Combine HTTP requests with a retina ready, resolution independent, screen-reader-friendly webfont.

How to Use Typicons

Typicons are dead simple to use.

Included in the download, or available on GitHub, are all the bits and peices you need to get set up.The first step is to include typicons.css in your the head of your HTML. Make sure you change the path to point to the file on your server.

<link rel='stylesheet' href='path/to/typicons.css' />

The CSS file uses the @font-face rule to point to several font files, providing a solution for as many browsers as possible.

@font-face {
  font-family: 'typicons';
  src: url("path/to/typicons.eot");
  src: url("path/to/typicons.eot?#iefix") format('embedded-opentype'),
       url("path/to/typicons.woff") format('woff'),
       url("path/to/typicons.ttf") format('truetype'),
       url("path/to/typicons.svg#typicons") format('svg');
  font-weight: normal;
  font-style: normal;

Again, ensure that the path to the files matches the setup on your server. Typicons uses Fontspring’s bulletproof @font-face CSS for including fonts on your website.

Now your ready to include any icons you want on your site. Just add a span or i tag with the appropriate class name.


That’s it! Remember to include both the typcn and typcn-class-name classes. I prefer this over the [class^="typcn-"], [class*=" typcn-"] method simply because the selector performs better on low performance devices.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

There is one caveat, though. Typicons is very large, weighing in at about 80kb (unzipped). I therefore strongly suggest reading the ‘Making Typicons’ article or checking out the resources in order to make a custom build of Typicons.



Icons, font

Artwork (and original font) by Stephen Hutchings:

Distributed under CC BY-SA licence.


This project uses font-builder scripts to generate data. See DEVELOPMENT.MD for more information on how to build the font.



You may also like...

1 Response

  1. AllanKonstantin says:

    Thanks for sharing 🙂

Leave a Reply

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