Icon Fonts for Web User Interfaces

I’m developing a layout for a web site, this time I surrendered to the icon fonts. Here are some examples.

What are Icon Fonts?

Icon fonts are font files that have symbols and glyphs (e.g. arrows, folders, magnifying glasses) instead of standard alphanumeric characters.

Icon fonts are like dingbat fonts, but are designed specifically for UIs. Icon fonts, just like other web fonts, use the CSS @font-face rule to display icons in web browsers.

And because they’re treated like web fonts, icon fonts:

  • Have great cross-browser support (even IE6, for example, can render web fonts using the @font-face rule)
  • Can be scaled on-the-fly if the user adjusts their web browser settings
  • Can be rendered with different colors
  • Can embody font- and text-related CSS properties (like text-shadow andgradient)

See icon fonts in action by visiting my friend Chris Coyier’s icon fonts demo page.

To learn how to use icon fonts, read this tutorial on CSS-Tricks: HTML for Icon Font Usage.

Free Icon Fonts

Below are 18 excellent icon free fonts that have licenses that permit commercial use. I strongly recommend reading the license terms and conditions of any freebie you get online, just to be sure that you can use the free resource for your particular purpose.

1. Foundation Icons Fonts

Number of icons: 137. License: MIT Open Source License.

Foundation Icons Fonts

2. Sosa icon font

Number of icons: 121. License: Custom license (use in commercial projects permitted).

Sosa icon font

3. Font Awesome

Number of icons: 196. License: Creative Commons Attribution 3.0 Unported.

Font Awesome

4. Iconic Icon Set

Number of icons: 172. License: SIL Open Font License and Creative Commons Attribution-ShareAlike 3.0.

Iconic Icon Set

5. Raphaël Icon-Set

Number of icons: 116. License: MIT License.

Raphaël Icon-Set

6. PulsarJS @FontFace

Number of icons: 73. License: SIL Open Font License.

PulsarJS @FontFace

7. IcoMoon

To create a font file, you’ll need to use the IcoMoon web appNumber of icons: 316.License: Attribution-ShareAlike 3.0 Unported.

IcoMoon

8. Typicons

Number of icons: 88. License: Creative Commons Attribution 3.0 Unported.

Typicons

9. Entypo

Number of icons: 100+. License: Creative Commons Attribution 3.0 Unported.

Entypo

10. Heydings Icons

Number of icons: 60. License: Attribution-NoDerivs 3.0 Unported.

Heydings Icons

11. Heydings Controls (App Icon Font)

Number of icons: 50. License: Attribution-NoDerivs 3.0 Unported.

Heydings Controls (App Icon Font)

12. JustVector Social Icons Font

Number of icons: 62. License: Free Art License.

JustVector Social Icons Font

13. Modern Pictograms

Number of icons: 86. License: SIL Open Font License.

Modern Pictograms

14. Brandico

Number of icons: 18. License: SIL Open Font License and Attribution-ShareAlike 3.0 Unported.

Brandico

15. Signify Lite

Number of icons: 38. License: Custom license (use in commercial projects permitted).

Signify Lite

16. Web Symbols typeface

Number of icons: 78. License: SIL Open Font License.

Web Symbols typeface

17. Social Media Icons

Number of icons: 74. License: Custom license (use in commercial projects permitted).

Social Media Icons

18. ikoo

Number of icons: 65. License: Attribution-ShareAlike 3.0 Unported.

ikoo

 

For those that are out of the loop, you can think of an icon font as a grown-up version of dingbats…with an actual use-case. The core idea is to take a set of icons or pictograms that would normally be implemented as an image or vector file and then convert it into a font. There are many reasons to do this too, according to Pictonic, as an icon font can load as much as 14% faster than images and can to be as much as 90% smaller than SVG files.

Now that a ton of options have emerged as popular choices among Web designers, we’ve made this brief list of 7 typefaces to point you in the right direction. If we missed your favorite, please share it with us in the comments below!

19. Font Awesome (free)
Font Awesome is an icon font that was designed to work perfectly with Twitter Bootstrap. Above you can see the font in use to make buttons, navigation, and more.

fontawesome 7 Gorgeous icon fonts to speed up your site and your design process

20. Fontello (free)
Differing from Font Awesome, Fontello is actually a tool that lets you easily piece together your own icon font based on icons from a number of sources, including: EntypoFont AwesomeIconic and Brandico.

fontello 7 Gorgeous icon fonts to speed up your site and your design process

21. Modern Pictograms (free)
The first icon font we discovered, Modern Pictograms was designed to work on-screen at sizes down to 18 pixels, and is remarkably pixel-perfect and useful as a pictographic font.

Screen Shot 2012 01 20 at 8.17.32 PM 520x165 7 Gorgeous icon fonts to speed up your site and your design process

22. Typicons (free): Yet another set of well-made, clean icons for Webfont use.

typicons 7 Gorgeous icon fonts to speed up your site and your design process

23. Pictonic (free-$160)
A well-supported and growing collection of 2300+ icons, 230 of which are free.

Screen Shot 2012 10 12 at 2.04.04 PM 520x224 7 Gorgeous icon fonts to speed up your site and your design process

24. Pictos ($49)
Pictos is an impressive set of icons that you can host and embed yourself via CSS @font-face (like the icon fonts above), or you can take advantage of Pictos Server, available through subscriptions.

Screen Shot 2012 10 12 at 2.11.09 PM 7 Gorgeous icon fonts to speed up your site and your design process

All of the above fonts are impressive and worth a look, especially if you’re planning on embracing responsive design and supporting higher resolution screens like the Retina display. Additionally, using icon fonts enables designers to quickly adjust the size, color and shadow of their icons on the fly — saving tons of time when changes have to be made and details refined. Your toolkit is only limited to what you can achieve with CSS.

via sixrevisions.com and thenextweb.com

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s