Now that we’re developing web applications for so many screen sizes and resolutions it’s critical that we design interfaces with icons that display properly across the board. Today, the best option is to leverage fonts with scalable icons as their characters.

It’s important to understand which browsers support @font-face. Check browser support for @Font-Face.

Here are my favorite top quality icon fonts.

Font Awesome

Font Awesome’s icon font is my current favorite set. Font awesome was designed to work with Twitter’s Bootstrap framework but also works well with Zurb’s Foundation and can be implemented on just about any HTML website.

IcoMoon

IcoMoon has taken the icon fonts to a new level by providing a library of over 1800 icons and the means of creating a custom font based on your needs. The benefit to a customized approach reduces the load on the server by providing only fonts used by the site. They also allow custom vector icons.

Foundation Icons Fonts – Zurb

Zurb is the founders of Foundation a responsive framework. They created a free icon font set. Their set isn’t as robust as some of the other sets out there but the quality and documentation make the implementation easy. They work and look great.