I had to search for good and free vector icons while designing for one of my blogs. During this, I came across some cool fonts which can be used as Icons in any of your designs, which are totally flexible and available with a bunch of icons which are quite enough for while designing applications or websites or blogs, etc. Before you jump up to use Icon Fonts, you may have one question in your mind – Icon Fonts are better or Image Fonts? Yes, this question comes to every developer.
It is understood that if you have fewer Icons in your application or website it’s always good to go with Image Icons. But if you have to use many icons and are resolution or density friendly then using Icon Fonts is the best way to go with. A couple of interesting advantages of using Icon Fonts are Scalable to any size without losing quality (Vector Icons), colors and shadows with CSS classes, Icon fonts load 14% faster than images, are 10% of SVGs file size and easy to use and implement while using some bootstraps like Twitter, etc.
Here is the list of Social and Application Icon Fonts which I came across, do let me know if you find some other useful Iconic Fonts:
Table of Contents
Easy icon font composer. Fontello is a tool to build custom fonts with icons.
Icon Fonts | Pictonic.co – An innovative, lightweight, icon font generator with 2718 vector icons to choose from. Icon fonts are not only more efficient than images, they’re pixel-perfect at every scale, and stylable with CSS, giving you unparalleled flexibility!
Social Icon Font for Free. 40 Rounded Media Social Icons Font. Absolutely, 100% font-faced, so can be easily implemented on every web project you need to, CSS3 em or simply color em Note: Above icons are displayed via font-face, try hover em.
Zurb – Foundation Icon Fonts 2!
Custom icon sets that are 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.
Sosa icon 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…
The iconic font designed for use with Twitter Bootstrap. Font Awesome delivers with 70 shiny new icons in version 2.0. This giant set of new icons was requested on the Font Awesome GitHub project and includes icon parity with Bootstrap.
This collection was started by fontello project to collaborate different small sets, missed in other iconic fonts. Also, it helps authors to share their works with community, as font glyphs.
Web Symbols typeface
Web Symbols is a set of vector html-compliant typefaces, so it might be used in any size, color and browser (okey, mostly â€” but IE7 for sure).
Typicons are free-to-use vector icons embedded in a Webfont kit for easy use in your UI, whether it be on the web or in a native application.
A Free Icon Web FontFREE ICON WEB FONT – Download the TTF, prep the font for embedding, recommends you use a service like Font Squirrel’s @font-face generator. The current version Added in this version are glyphs for strike (lightning), archive, and jotter (note pad). From the same developer, there is another set of the app icon fonts.
Icomoon – Custom Built and Crisp Icon Fonts, Done Right. IcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts. Browse among thousands of pixel perfect icons or import your own vectors.
ikoo – 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.
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.
Iconic – Some Random Dude Iconic is an open source icon set consisting of 171 marks in raster, vector and font formats.
Sanscons – Some Random Dude Sanscons is a CSS-friendly version of Bitcons â€” allowing you to set custom backgrounds on your icons.
PulsarJS @FontFace 73 Free IconFont – IconFont is made with some of the most used icons used in mobile development. All gfx done with flash and edited with inkscape!!!
Social Media Icons Pack
Socialico is a package of 74 social media icons, combined within a single wieght font and designed by Jelio Dimitrov a.k.a. Arsek.
Signify Lite: Free Icon Font – With this font you have 38 beautiful, hand-crafted icons at your disposal for any use. You can use them in your designs in Photoshop, or on the web.
Entypo – 250+ carefully crafted pictograms – Entypo is a set of 250+ carefully crafted pictograms. All released for free under the Creative Commons license CC BY-SA.
JustVector Social Icons Font
This @font-face kit is created using fontsquirrel. So itâ€™s pretty much ready to be downloaded and used as it is right now. You can check out Alexâ€™s demos right here. The font is distributed under the same license as the icons, the Free Art License which, allows you to pretty much do anything you want with it.
Few more useful resources:
Font-Icons for Compass – Font-icons for Compass allow for quick deployment of pictogram icon sets in any compass web project. Using font glyphs as icons offer a number of advantages over images, such as vector scaling, ease of implementation, colorizing on the fly, css shadows, etc.
Convert vector images to web font icons
HTML for Icon Font Usage