Android Holo font icons

The aspect that I appreciate the most about developing hybrid apps with PhoneGap in respect to all the different native languages is the possibility to reuse resources, not only knowledges.

Developing an Android native app requires a big effort to create and manage the iconographic elements which composes the UI. The most complex aspect is the supportĀ of the four main screen resolutions, LDPI, MDPI, HDPI, XHDPI and as we can see from the Android Dashboard it’s not even all of them!


Each and every iconĀ that we make must be exported for all resolutions, this way doing tasks like changing a color or fixing an error can become activities that require hours if not days. To easeĀ repetitive tasks we can resort to developĀ an automated process for most Adobe programs, but this approach makes me think that we’re kind ofĀ going around the problem instead of facing it directly.

The font icons

One of the tecniques that is revolutionizingĀ this aspect on the web, replacing the famous image sprites, is the use of Font Files, which are binary containers of vector symbols historically used to change the appearanceĀ of the alphabet’s letters that composes text, to store instead iconographic symbols to show in place of letters and words.

The advantages of this method are many, and are carefully explained in this article on CSS-tricks byĀ Vitaly Puzrin, the developer of theĀ open source font icon generator Fontello.

If a vector icon font can beĀ scaled flawlessly at each screen resolution without dedicated replicas, thanks to PhoneGap we can introduce this workflow in the mobile app development process, with the following advantages :

  • Unlike the sprite images the json fileĀ that hosts the icons can be read by VCS softwares in order to know exactly what changes and when.
  • One time export of the icons is enough to ensure flawless quality on all screen resolution, especially for higher resolutions, making easier the maintenance process.
  • NoĀ clonesĀ to track for every icon at each resolution.

The official Android iconsĀ as font face

On the page that explains the Android Iconography there is a link to downloadĀ the default icons embedded in system UI, it contains theĀ Core andĀ Action Bar packs. I exported all the layersĀ containing the icons as SVG files and saved all of them as compund paths in order to import them into FontelloĀ to obain a font family with all theĀ official icons.

The result is aĀ config.json file, when loaded into Fontello will generate the download link with all the available 144 icons extracted from the Illustrator files. The json file togheter with the generated font files, CSS and HTML demo map are available on GitHub.

Here you can browse the demo map file packed in the project.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.