Icons In Accent Color

You have about 50 different icons in your app. You want to show them in dynamic color (determined by user/device at runtime) in different sizes at different places. You want them to be lightweight and swift to render. If you go by traditional PNG way, you could somewhat achieve (no scalability) it with about 2000 different files of no less than 5MB. Here is my proven solution to achieve this with a 15KB, yes a single 15KB file.

If you have used my app Avirall Time Suite, you must have noticed that throughout the app, where required, icons adopt accent color. Some elements in the app are also shown in dynamic contrast color of the accent color. I will write another post about how to get contrast color of the accent color. Following are screen shots of the app with different accent colors and different size icons. Notice New, Recent, and Options sections:
Avirall

I had to meet following requirements to achieve accent color icons in the app:

    • There are about 50 different icons in the app to be shown in current theme accent on the device.
    • At different places same icons have different sizes.
    • No JPG because of lack of alpha channel.
    • No PNG because though it had alpha channel, color and size scalability is an issue. 50 icons X 4 sizes X 12 accent color would have gotten to unmanageable 2400 icon files, and still it would support only rigid 12 accent colors.
    • So, no raster images.
    • No paths – managing complex paths would not be easy, plus i was not sure about the performance compared to the solution I was thinking.

So I decided to develop and design my own custom dingbat TTF font. Having fonts for icons has following pros:

  • Very light file containing all 50+ icons. Just 15KB!
  • System renders the fonts as text, so no performance issue.
  • Easy Color and size scalability.
  • Low maintenance.

Following are the cons:

  • No gradient. (Though it’s possible but I have not experimented)
  • Font creation is a pain, initially.

You could also think of using fonts for icons, if you need color/size variations in your app for a large number of icons.

I have released the font I created for Avirall, under OPEN FONT LICENSE. Read this post for details.

Happy coding!

Advertisements

5 thoughts on “Icons In Accent Color

  1. Pingback: [Windows Phone] Icons In Accent Color

  2. Pingback: Weekly Digest for Developers: Jan 19 – Jan 26, 2014 - Super Dev Resources

  3. Pingback: Windows Phone Make Over By Design Guru Arturo Toledo | Sharp Statements

  4. Pingback: Weekly Digest for Developers: Jan 19 – Jan 26, 2014 – linux-us-large.cloudapp.net

  5. Pingback: Weekly Digest for Developers: Jan 19 – Jan 26, 2014 – superdev

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s