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.

Typicons

DOWNLOAD

 

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.

Related post:  30 Amazing Free Goodies for Designers

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

<span><span>

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.

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.

 

License

Icons, font

Artwork (and original font) by Stephen Hutchings:

Distributed under CC BY-SA licence.

Scripting

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

 

DOWNLOAD

Divi WordPress Theme

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 *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close