Awaken the Hieroglyph (Story about animate your icon)

Short Stories of the Icons

The Arts of icon has been found thousands years before human even could think about computer. Thanks for our ancestor who found hieroglyph and ancient text to deliver message. The discovering of icon it so amazing till we couldn’t get over with it over centuries later (duh) 😞

Hieroglyph, an ancient text of centuries ago

Nowadays, we still use it on daily routine. Shape and message may not same anymore but it work perfectly same as when it found: to communicate without words. 👏🏼 (event this emoji is part of icon 😃 )

Behold, the modern hieroglyph for User Interface design.

Animate Icon

Thank’s to digital era which push people to communicate a step more effective and efficient. Icons are no longer static image in order to deliver complex messages. Icons need to be transform, re-shape, and move. That’s why icons need awaken with some magic. ✨

Gmail animate icon by Google Team


Animate and motion icons are good to:

  1. Deliver complex message in shortest ways
  2. Add emotion and feel on the design
  3. Eye - catcher


There are some methods to create animate icons based on what you need. Each methods has their own weakness and strength such as:

  • SVG animation: have very sharp image, vector based, & minimalist. This is the best way to create animate icon with low capacity. It resizable, very good to create hover motion on the button of website because you can control it.
Fun Button by Eddie Lobanovsy
  • GIF image: offer you more variant with gradient, easy to implement. Because it raster based, you can’t easily resize it as you like. Very good to implement any gradient image.
Dinner icon by Chuan

How to Create

I will update how to create animate icon both SVG and GIF animation on my next stories. So, Stay tune. 😉