Skip to main content

How to create your own scalable icon set

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.

There are plenty of tools online for creating your own font

There are plenty of tools online for creating your own font

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!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began over a decade ago. The current website team consists of five people: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.