121
0
0

The Best Free Iconic Web Fonts

HirveshviaFunctionn
November 27, 2012

Iconic Web Fonts can be displayed on websites using CSS @font-face  to embed scalable vector icons (or dingbats) on the web.  There are numerous advantages of replacing icons images with icons fonts.  We get the ability to style the font icons with CSS and have infinite scalability.  Scalability is possible because the icon inserted in the webpage is treated as text.  Web Fonts also provide good cross-browser compatibility – even back to IE6.  HTTP requests are also reduced since just one HTTP request is required for loading all the icons in the form of a font – and this is a recommended practice according to Yahoo!  Performance Rules.

Below are listed the best of free iconic fonts which can be found on the web today.

 

Font Awesome - Free Iconic Web Font

Font Awesome is the iconic font designed for use with Twitter Bootstrap.  It contains more the 220 icons.  It also boasts the following features:

  • Desktop Font + Vectors - The full desktop font and a PDF of vectors are now included. Happy designing.
  • IE7 Support - Font Awesome v2.0 now even supports IE7. If you need it, you have my condolences.
  • Free for commercial use - The Font Awesome web font and CSS libraries are completely free for commercial use.
  • Screen reader compatible - Font Awesome won't trip up screen readers, unlike most icon fonts.
  • Made for Twitter Bootstrap - Designed from scratch to be fully backwards compatible with Twitter Bootstrap 2.0.
  • CSS control - Easily style icon color, size, shadow, and anything that's possible with CSS.
  • Infinite scalability - Scalable vector graphics means icons look awesome at any size.

 

OpenWeb Icons - Free Iconic Web Font

OpenWeb Icons is an extension to Font Awesome web font because the latter had no RSS-icon.  OpenWeb Icons contains several additional icons which can be used alongside the original Font Awesome web font.



Typicons - Free Iconic Web Font

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

Typicons save space and time by pairing a vector icon to a character, just like Webdings or Windings. Then, using the CSS3 pseudo-selector ::before, the appropriate characters are bound to their respective classes (eliminating the need to remember the correct index of each icon).  It has the following advantages:

  • No more slicing images and modifying background positions
  • No more media queries for different screen resolutions
  • 88 lightweight, consistent graphics based on a 24px grid
  • Pixel-perfect rendering in webkit browsers using -webkit-font-smoothing: anti-aliased
  • CSS and original vectors are included in the kit
  • Typicons are a work in progress. A more semantic link between icons and their Typicon character is currently being developed. In the meantime, you can download the web font below.

 

Web Symbols Typeface - Free Iconic Web Font

Web Symbols is a set of vector html-compliant typefaces, so it might be used in any size, color and browser.  This web font contains social network icons, gallery arrows or «signature» butterflies for the footer of each of projects.

 

Modern Pictograms - Free Iconic Web Font

Modern Pictograms is a typeface for interface designers and programmers. Designed in early 2011 for the Flatfile WordPress theme, the pictograms stay sharp when used large or small.

Install the OpenType file for Photoshop mockups and drop in the @font-face code into your CSS to embed them right in your Web page. Designed to work on web sites at sizes down to 18 pixels, but best at higher than 24 pixels.

 

Iconic - Free Iconic Web Font

Iconic is an open source icon set consisting of 171 marks in raster, vector and font formats.  Iconic aims to be the most forward-thinking icon set around based on its support of forward facing display/deployment methods. Icons should not just be clear and attractive, they should be easy and flexible to work with.  It has the following features:

  • Minimal, stylized design - Iconic is intended to be a simple yet unique in form. Alternatives for several marks have been added for greater choice in style.
  • All the formats you need - Iconic comes in PNG, SVG, SWC, OFT/TTF/EOT and Omnigraffle stencil formats as well as the tools used to generate them.
  • High size flexibility - High legibility over a large scale range is a big priority for Iconic. Nearly all the icons will work from 8 pixels to infinity (and beyond).
  • A full generator suite - Iconic comes with JSX and Python scripts to allow you to build your own PNG, SVG and font files however you would like.

 

The Entypo Pictogram Suite - Free Iconic Web Font

Entypo is a set of 250+ carefully crafted pictograms. The package contains an icon font — OpenType, TrueType and @font-face — EPS, PDF and PSD files. All released for free under the license CC BY-SA 3.0.  It has the following features:

  • Over 150 new pictograms.
  • The Entypo Social Extention.
  • Improved old pictograms
  • Character map
  • Glyph guide as RTF
  • Improved hinting

 

Heydings Icons - Free Iconic Web Font

Heydings Icons is a fairly modest collection of 50 57 60 glyphs specifically intended for the accessorization and classification of textual cues such as hyperlinks, navigation elements and buttons. You can, of course, use the set much more expressively as well. Also, there's no requirement to embed; you may just want to use it as a desktop/print font.

 

PulsarJS - Free Iconic Web Font

PulsarJS is a free web font which contains 73 icons.  It is free for use and comprises the most used icons in mobile development.

 

Socialico - Free Iconic Web Font

Socialico is a package of 74 social media icons, combined within a single weight font.  Every single icon matches a particular key on your keyboard – for example, the lower caps of the basic Latin alphabet form the more popular social icons in a circle, while the representations in capital letters of the same alphabet show them without the circle formation – in their pure form.   The social icons font is very convenient and easy to use for web design in themes, page layouts etc, as well as for every type of print or offline design.

 

Raphaël Icon-Set - Free Iconic Web Font

Raphaël Icon-Set Web Font is the great Raphaël Icon-Set by Dmitry Baranovskiy converted to a web font. Though normally used as SVGs with the JavaScript-Library Raphaël you can now include them with pure CSS and without the need to have JavaScript enabled.  And because the icons are just text you can do all the fancy CSS3 stuff with them.

 

Pictonic - Free Iconic Web Font

Pictonic Free is a free web font which 257 free icons. It has the following features:

  • Social
  • Browsers
  • Programming
  • Frameworks
  • Sharing
  • Operating Systems
  • Databases
  • Version Control

 

Ligature Symbols - Free Iconic Web Font

Ligature Symbols is a free icon web font with ligature features.  It was designed by Kazuyuki Motoyama who has been working as a Web designer in Kyoto.  Ligature Symbols contains over 250 icons in the set, covering a wide variety of use cases and also includes more than 30 common logos like Apple, Android, Windows, etc.  Ligature Symbols is licensed under the SIL Open Font License.

 

Sosa - Free Iconic Web Font

Sosa includes the 120+ icons I have found most useful. The download includes the .ttf .eot .svg & .woff files need to use this icon font via @font-face.  Icon categories include: web; devices; media; media controls; tools; stationery; social; e-commerce; forms, OS / CMS; weather; graphs; vehicles and more.

 

Meteocons - Free Iconic Web Font

Meteocons is a free weather icon set, it works perfect for apps or your new web project.  This set containg 40+ icons available in PSD, CSH,EPS, SVG, Desktop font and Web font.

Meteocons Font is a typeface available in Truetype, OpenType format and a complete @font-face kit to be used freely in your projects.  Its use is very simple, once loaded font-face kits in the main CSS is already ready for use.

 

Foundation Icon Fonts 2 - Free Iconic Web Font

Foundation Icon Fonts 2 is a custom icon set that is stored in a handy web font and are coded to be more accessible. A couple lines of CSS and the right markup will get you going in no time.  Foundation Icon Fonts 2 was designed to be refined enough to stand alone as a simple icon, but left room for the imagination.  Since you’ll be dealing with a font, the opportunities are nearly limitless.  Now your icons can be any size, any color and any style available in CSS.

 

ikoo Typo - Free Iconic Web Font

ikoo Typo is a font specially developed to be integrated into an html page without using images via @FontFace (or other). Customize the color and size by CSS. You can also use ikoo font for your web page design on photoshop or fireworks.

 

Signify Lite - Free Iconic Web Font

Signify Litess includes 38 beautiful, hand-crafted icons at your disposal for any use. You can use them in your designs in Photoshop, or on the web. The beauty of icon fonts (besides the scalability and tiny file size) is that you can edit the color, size, effects and more with CSS and this requires no images to be downloaded or installed.

 

Brandico - Free Iconic Web Font

Brandico is a "crowdsourced" collection of popular logos, mostly for use in Fontello.  It includes only icons for links to pages in social networks, messengers icons and "login via..." icons.

 

GEL Icons - Free Iconic Web Font

The BBC Global Experience Language (GEL) specifies a list of icons. The icons are provided in PNG, Photoshop, and Illustrator format. Here they are also provided in a web font format compatible with all browsers the BBC supports.

 

Grands - Free Iconic Web Font

Grands is a set of 80 icons which can be used as a web font.  It includes popular social media websites logo and various known websites’ logo from the web.  The font is also available in SVG and Vector formats.

 

If you’ve liked this post, please share it and subscribe to the the RSS feed, follow us on Twitter, on Google+, or by email to get the latest roundups each month and to keep up with our daily posts.

Discussion

-