Creating your own icon font is far from witchcraft. There are a variety of services and applications allowing you to easily create a personal set of icons and to wrap them up into a scalable icon font in no time at all.
All you need as a basis are scalable vector images. To create these images, any kind of vector drawing tool that provides SVG export, such as Illustrator or Sketch, will suffice. Alternatively, you can create your icon set directly, using a font editor such as Glyphs, FontStruct or the quite bulky but free FontForge.
Whatever tool you're using, there are just a few factors to keep in mind when designing scalable icons for native apps. On any platform, your icon set will be interpreted by a font rendering engine, which will enhance curves and smooth edges depending on the device resolution or screen density.
Ultimately, your icons will be rendered to a pixel grid. Through hinting (i.e. tweaking your characters for optimal rasterised rendering) and testing you can optimise your icon set in any way necessary.
Your work will come out best if you keep in mind a basic grid that covers your major target resolutions. Let's have a look at an icon for a button in iOS, for example. As this icon is intended for an app for both iPhone and iPad, this icon will be displayed in five different sizes: 30px (on iPhone and double for Retina), 40px (on iPad and double for Retina) and 48px (on iPad mini, slightly bigger for a more ergonomic button size). All these sizes are all multiples of 240 so designing on a 240px grid will ensure that the icons appear crisp and clear.
Once you have crafted and hinted your vector icon set, you can easily export the icons from your font editor or online icon font service of your choice. The result of your hard work will be unified and scalable font set, which you directly apply to your mobile app development.
Words: Robert Brauer
This article originally appeared in net magazine issue 244.
Liked this? Read these!
- The designer's guide to special characters
- Our favourite web fonts - and they don't cost a penny
- How to build an app (opens in new tab): try these great tutorials
