I love creating icons.
Colorful and vibrant, with nice little transparencies and details. They can be beautiful and effective navigational elements, as well as visual breaks in heavy text areas. It’s hard to think of a project which wouldn’t benefit by using them properly. The traditional icons don’t always fit the need, though. Sometimes you need vector versions for scalability – or multi-sized ones for navigation and mobile use. In these cases, icon fonts are a more practical and easier to maintain approach.
Icon font sets and creators, such as Font Awesome and Icomoon, have made it so much more accessible for designers to create their own libraries. Leverage them.
Icon fonts are basically “glyphs” to use in your projects, as you would a traditional font. This allows you to style with CSS (color, multi-layer overlays, animation, etc.), as easily as you would do for your other fonts. You can use a font-creation app, or a web-based solution like Icomoon. Icomoom is an easy (and free) tool, and allows you to import your exported SVG files into their font-converter. It then provides a zipped download of the newly created font-set, example usage file, and a detailed CSS file. Very straightforward and useful. Once downloaded, you upload to your server (or CDN), and use the “font-family” attribute to assign. Easy.[/icon_box]
What to consider when creating your icons.
When you are creating your traditional icons for a project, consider creating a “font version” at the same time. This not only gets you thinking ahead, but it’s keeps you from becoming overly complicated in your creations. Though they can be used in branding, icons are symbolic representations, not logos. But take a cue from logo creation. they need to look good in all sizes as well as monochrome.
Take the following icons I created:
The top row is the standard icon I can use stand-alone or in sprite-menu format. The bottom row is how an icon-font version would look. Ignore the color scheme for this row, as it can be any single color you wish.
Designing and prepping icons as fonts is a little different than your typical creation:
- They must be single color
- They must be flat, with no gradients
- They must not use transparencies
- They must not have stacked elements. Create them “punched” (“minus-front” in Illustrator & “punch” in Fireworks), in order to have the background show through. Negative space is your friend.
- Design them on a grid (512px or higher), in order to have a sharp font appearance. Nothing worse than blurry icons.
When you’re creating your initial standard icons, keep these things in mind. Create them in a colorful, transparency-loving way for traditional use…but make sure the font-version is not a drastic change. It will help you keep your icon library easier to maintain and collaborate with others.
Recent Comments