{"id":22113,"date":"2014-09-29T01:53:21","date_gmt":"2014-09-29T05:53:21","guid":{"rendered":"http:\/\/www.andysowards.com\/blog\/?p=22113"},"modified":"2014-10-01T14:02:55","modified_gmt":"2014-10-01T18:02:55","slug":"icon-fonts","status":"publish","type":"post","link":"https:\/\/www.andysowards.com\/blog\/2014\/icon-fonts\/","title":{"rendered":"25+ Best Free Icon Fonts"},"content":{"rendered":"

Icon Fonts are amazing! Let’s just get that out of the way first. There’s no denying that Icons are a big part of web design – apps, websites, and now mobile apps all use Icons for familiarity and to save space and add meaning to quickly establish what something does or how you should proceed. For years online you could find icon packs and sets full of little transparent .png image files that you could download and use in your Photoshop designs for whatever it is that you were making that needed a little icon action. While these were fine it was not very versatile, if anything needed to change you didn’t have a lot of options – what you see is what you get, not to mention the file size added up after a few dozen of these bad boys. The new hotness however is Icon Fonts, which are all the rage and everywhere on the web, especially in the latest frameworks like Bootstrap and all of the fancy wordpress themes taking advantage of the latest trends.<\/p>\n

How do icon fonts work?<\/h2>\n

Icon fonts are exactly what the name implies, icons embedded into a font. You upload the font resources to your server (like installing them on your local computer) or reference the resource online. So rather than getting letters out of the font, you get icons when you use specific unicode character codes in the ‘content’ property in your CSS. Some older browsers don’t support the content property in CSS but if you need to support those, some font icons do have support via Glyphicons, which are images and not a font (All the icons are found within a sprite image) so don’t confuse those with font icons. You can even create your own custom icon fonts! If you’re going to create a font for icons it is a good idea store your glyphs in a Unicode Private Use Area<\/a>. I’ve included some links at the end of this if you want to learn more and create your own!<\/p><\/blockquote>\n

Why should I use icon fonts?<\/h2>\n

The reason icon fonts are so popular now is because of their own usability – it’s just like the traditional graphic except they are scalable – meaning that they are basically vectorized graphics for the web – set it and forget it, one size fits all! Scaled up or down they look crisp and clean like they were made just for that size. Can’t get much easier than that. You can change their colors via CSS, and add drop shadow, stroke, rotate them, anything you want (and can legally do with CSS). As you can see they are a real game changer in what you can do with an icon without having to drag it back into photoshop – icon fonts are designing in the browser at it’s best! More than just a pretty face, they are also more efficient, and incredibly light weight. Because it\u2019s a single font file instead of multiple images, it requires just one HTTP request typically, which is great for site performance. Like everything though, no matter how good… something better could come along and take it’s place…\n<\/p><\/blockquote>\n

SVG Icons<\/h2>\n

Even newer on the scene (and somewhat superior for newer browsers) is the introduction of SVG <\/a>(Scalable Vector Graphics) Icons, rather than using a font you use an .SVG source file with the vector path for each icon you want to display (usually each icon in it’s own .svg file for organization). SVG has been around for a while but if you haven’t had a chance, familiarize yourself<\/a> with it and then using it for icons won’t be so daunting. I will list a few SVG Icon resources in this article, but we are mostly talking about the more established Icon Fonts – SVG Icons are still catching steam and don’t support some older browsers, but a lot of the popular icon font generators support SVG as well – it is important though to know the difference. Icon Fonts are fonts – you need font files to use them. SVG Icons are .svg files, and can be thought of more as the source file for the icon (kind of cool to think you are literally coding your own icons). This is where we are headed, but like I said, older browser support is the only thing holding back full adoption right now.<\/p>\n

Now that you are a little more filled in, let’s dive into some of the best free icon fonts out there right now that you should check out for your next web app or client website project! Enjoy!<\/p>\n

Icon Fonts<\/h3>\n

Pictos<\/h2>\n

\"pictos-icon-font\"<\/a><\/a><\/p>\n

Typicons<\/h2>\n

\"typicons-web-font-icons\"<\/a><\/p>\n

Sosa by Twenty by Twenty<\/h2>\n

\"twenty-by-twenty-free-icon-font\"<\/a><\/p>\n

Foundation Icon Fonts<\/h2>\n

\"foundation-icons-font\"<\/a><\/p>\n

Entypo<\/h2>\n

\"entypo\"<\/a><\/p>\n

Icomoon<\/h2>\n

\"icomoon-font-generator-free\"<\/a>
\nLike some of the other tools featured here, you can also use this to create your own fonts – icon font generators are awesome!<\/em><\/p>\n

Fontello<\/h2>\n

\"fontello-free-icon-font-generator\"<\/a><\/p>\n

Font Awesome<\/h2>\n

\"font-awesome-icon-fonts-free-download\"<\/a><\/p>\n

Pictonic<\/h2>\n

\"pictonic\"<\/a><\/p>\n

Iconic<\/h2>\n

\"iconic\"<\/a><\/p>\n

The Noun Project<\/h2>\n

\"the-noun-project-icons\"<\/a><\/p>\n

Rondo<\/h2>\n

\"rondo\"<\/a><\/p>\n

MFG Labs Font Icon Set<\/h2>\n

\"mfglabs-iconset\"<\/a><\/p>\n

Icon Vault Custom Icon Font Generator<\/h2>\n

\"icon-vault-custom-font-generator\"<\/a><\/p>\n

Fontastic<\/h2>\n

\"fontastic-free-icon-fonts-creator\"<\/a><\/p>\n

Batch<\/h2>\n

\"batch-svg-font-icons\"<\/a>
\nThis one, like some of the ones featured here, offers all kinds of downloads – .svg – webfonts .png whatevs<\/em><\/p>\n

Zocial<\/h2>\n

\"zocial-icons\"<\/a><\/p>\n

Linecons – Free Vector Icons Pack<\/h2>\n

\"lineicons-free-icon-font-svg-files\"<\/a><\/p>\n

Raphael Icon Set<\/h2>\n

\"raphael-icons\"<\/a><\/p>\n

SVG Icons<\/h3>\n

BBRIEL – Ready to use SVG icons for the web<\/h2>\n

\"svg-icons-ready-made-code\"<\/a><\/p>\n

Snipicons<\/h2>\n

\"snipicons-svg-icon-set\"<\/a><\/p>\n

WordPress SVG Icons Plugin<\/h2>\n

\"wp-svg-icons\"<\/a><\/p>\n

Icon Melon – SVG Icons<\/h2>\n

\"iconmelon-svg-icons-for-the-web\"<\/a><\/p>\n

Customizr.NET<\/h2>\n

\"customizr-net-svg-icons\"<\/a><\/p>\n

Cool SVG Code Tools<\/h3>\n

Grunticon<\/h2>\n

A Grunt.js plugin for managing and delivering sharp icons to all devices<\/p>\n

\"grunticon\"<\/a><\/p>\n

gulp-iconfont<\/h2>\n

Create icon fonts from several SVG icons<\/p>\n

\"webfonts\"<\/a><\/p>\n

grunt-svgstore<\/h2>\n

Merge svgs from a folder<\/p>\n

\"svg-store\"<\/a><\/p>\n

More SVG & Font Icon Resources & Tutorials!<\/h3>\n

Need more resources to create your own font icons and what it’s all about? Check out these links and become a master in using icons correctly on the web!<\/p>\n

How To Create and Use Your Own Icon Fonts<\/a><\/h2>\n

\"how-to-create-and-use-your-own-icon-fonts\"<\/a><\/p>\n

How to use IcoMoon and Icon Fonts \u2013 Part 1: Basic Usage<\/a><\/h2>\n

\"how-to-use-icomoon-and-icon-fonts-part-1-basic-usage\"<\/a><\/p>\n

How to create an icon font (from Adobe Illustrator to SVG in 7 steps)<\/a><\/h2>\n

\"how-to-create-an-icon-font-part-1-the-illustrator-workflow\"<\/a><\/p>\n

Creating and Using a Custom Icon Font<\/h2>\n