Font Icons for a Better Web UI
Font icons have emerged as the go to resource for simple resolution independent visual design elements. The obvious benefits over images which suffer from varying resolutions and sizes notwithstanding, there are so many to choose from, making it easier than ever to use them in web design and development.
Developing a visual language through iconography can give your project and its UI a depth of meaning and clarity that goes beyond written language and complex imagery or video. They can both support and inform touch points, areas of emphasis, and navigation. The following are some great resources for exploring a using iconography in your next project.
Font Icons Sets
The following sets are free or have a free set to use. You can download the font files and use them in your local projects and even clone many in GitHub and modify and extend them for your own purposes. Most tend to incorporate SVG with an @font-face fallback so they should work well in just about any scenario.
Iconic’s open set is pretty robust, and an obvious play for you to purchase the more fully featured pro set. You can fork it on Github and it boasts a tiny footprint at 12.6K. Documentation is somewhat limited but includes usage as SVG as well as @font-face, including Bootstrap.
One of the first and best open icon font set, Font Awesome is open and free and has more than 479 icons for web applications, file types, spinners, text editor, video player, and brands. They have great documentation to get started with incorporating these into your HTML/CSS, even offering a CDN hosted Bootstrap style sheet and plenty of examples to peruse and you can fork it on GitHub. If you use Omnigraffle for your UX work, they have a Font Awesome stencil that uses the actual font installed on your system.
If you use the excellent responsive framework Foundation from Zurb, you can grab their very own icon font from the playground. NOTE: They have a disclaimer that it hasn’t been tested with the latest version of the framework so YMMV.
Like Foundation, Bootstrap has a default icon set that you can use right away. Not developed as part of the project like Foundation, the icon set is a free subset of Glyphicons called Glyphicon Halflings. If you use Bootstrap in your projects, this is the easiest way to get started, though Bootstrap has defaults that make using your preferred icon set pretty easy and as previously noted Font Awesome has their own Bootstrap CDN hosted style sheet.
Developed for use with the open source front end app development framework, Ionic, this font icon set is mimimalist and fairly comprehensive. There isn’t as much documentation as with some of the others but there is at least a cheatsheet, and you can also fork it on GitHub and they have a CDN for handy referencing.
Using a font icon generator has many advantages. You can use it to create very small font files/SVGs so that you don’t need to burden a user with downloading a font file with 300 characters, of which they will only need a handful to view your web app. The down side is that you may need your own CDN, which many of the icon fonts mentioned have.
This font icon generator allows you to drag and drop custom icons you have crafted and mix-n-match them with several open-source font icons (including Font Awesome and Iconic) to create your own font that you can download. You can even customize class names and codes. There’s an API and you can fork it on Github.
IcoMoon is a powerful font icon generator that allows you to mix and match from both free and paid icon libraries as well as from your own. You can manage multiple sets (called projects) from your account so you could have a different set for different clients, apps, or scenarios and you can tag these for easy searching. The app can be installed via the Chrome Store which can be used offline. The premium version has options for syncing changes to your font packages and font hosting.
Fontastic has a great interface and like IcoMoon and Fontello, it can import icon sets and has the most extensive set of predefined (both paid and free) options. You can also upload your own and modify your class and character mapping. You can create as many sets as you like but other than accessing them in a dropdown list, there isn’t much in the way of managing these. You can of course download your font or SVG sprite or alternatively use their Icon Cloud service which hosts the font files on an Amazon S3 server at 5,000 page views a month. With a premium account this is upgraded to the Amazon Cloudfront CDN and 1M views a month.
Described as Google Web Fonts but for icon fonts only, We Love Icon Fonts is a source for free icon font sets. This is a great resource for exploring and finding icon fonts to fit your project. The authors caution that it is a public gamma, so it shouldn’t be used in production, but you can of course go straight to the source of the icon font. Or you can fork it on GitHub and create your own font hosting service.
Please note, I did not include anything on stuff like The Noun Project, or Icon Finder which although very interesting, are not specifically icon font focused. Got any icon fonts of icon font resources that you use that I missed? Let me know in the comments. Happy iconography!