Icon fonts have become a popular item for web designers. While their predecessors, dingbats, offered limited graphic choices, they failed to catch on. Unlike dingbats, icon fonts are much more versatile, offering all of the advantages of being fonts while coming in a wide variety of graphics.
Since icon fonts can be embedded into websites, they can also be displayed regardless of what operating system or type of device the site’s visitors are using. The Next Web notes that icon fonts can also speed up the loading of a site over images, up to 14% faster than images. Icon fonts are also up to 90% smaller than SVG files — icon fonts can even use cascading style sheets (CSS) for further customization of colors, size and more.
Like normal fonts, icon fonts are available for free or for a fee. Free icon fonts are sometimes released under a Creative Commons license. Depending on the license chosen, Creative Commons licensed material provides users with different types of ways to use the licensed material, including modification, commercial or non-commercial use, and more. GlyphSearch is a useful search tool for finding specific icons for your next project.
Before you get started, let’s take a look at seven of the best free icon fonts.
1. Font Awesome
Font Awesome offers 585 downloadable free fonts on their website. Created by Dave Gandy, the fonts come in various shapes, including line art and rounded images. Most of these font icons would go well with sans serif fonts like Arial or Helvetica, though a few fonts — such as the font icon logo included for Wikipedia “W” – might work better with a serif font.
Ionicons bills itself on its site as the home of “100% free and open source” fonts, and offers about 730 fonts. They’re divided into three sets, each with their own styles. They should look good with any font, serif or sans serif. The fonts are also offered under an MIT license, a type of free software license.
Glyphicons are designed to complement any type of font. The icon fonts’ creators note the icon fonts look particularly well with Apple-related interfaces, such as iOS apps or OS X. Thus, the Garamond font in particular should work well with Glyphicons fonts. While they offer several sets at various price ranges, Glyphicons does offer a free set. The free set comes with the 610 basic Glyphicons fonts, plus 60 social Glyphicons fonts. The fonts are released under a Creative Commons Attribution 3.0 Unported (CC BY) license.
The latest version of Foundation’s icon fonts (version 3) comes with 283 different fonts to choose from. The rounded icon fonts should match various serif fonts. While the previous versions of the fonts are available, Foundation recommends version 3 for the fonts’ more consistent look.
Despite the site’s name, IcoMoon offers two sets of free icon fonts, and both sets should look great with serif or san serif fonts. The first set features a choice of 490 rounded, mostly solid colored icon fonts. The second set is released under the name Linearicons, a set of 170 line-based icon fonts. The Linearicons set is available under a Creative Commons Attribution-Sharealike (CC BY-SA 4.0) license.
Octicons offers a free set of 163 solid colored icon fonts, and the set is downloadable via its GitHub site. Octicons notes the icon fonts aren’t monospaced, which means each font character isn’t the same width. However, they offer plenty of tips for designers who are using them. The fonts also look good when used in multiple sizes of 16px fonts.
Typicons offers a set of 336 rounded vector icons, all free to download from its website. Coming in a choice of solid and outline icon styles, the fonts should be well-suited for Arial or Helvetica. The icons/graphics are distributed under a Creative Commons Attribution-ShareAlike (CC BY-SA) license.
These seven icon fonts should prove useful for website designers. Combined, they offer thousands of different choices of graphics to include with site text, and they also give designers an easy way to spruce up site content. The future is looking bright for icon fonts in the design sphere!
Note: the featured image for this post includes icons from IcoMoon.Buffer