How to get animated icons for your design project
Iconography has a huge role to play in our lives today.
Given, that screens are getting omnipresent, our ability to synthesise information based on icons is important. Mostly, because real estate is costly in an attention economy of 8 seconds (time span we have to decide on something on the web) and we need to understand the context of content in the easiest manner possible ; to tap. Or swipe.
Icons play a massive role in this , because they can communicate topic, theme , subject or call to action, in the most minimal manner possible. Till now, however, we have mostly seen them in a static state.
What if you could animate these icons, to drive a little bit more of interactivity?
As a designer, it would be nice to have that flexibility depending on the kind of project that one might be involved in. I am not that big of a designer and mostly use static fonts to just dabble in my various hobby projects. However, when it comes to animated icons I have found LivIcons to get the job done.
Nicely. (In a few cases they have also increased CTR)
So what are LivIcons?
Some other features :
- LivIcons are based on SVG (scalable vector graphic) in all modern browsers and on VML (Vector Markup Language) in IE6 - IE8. So these icons can be any edited to any size and would look good in any kind of screen or interface. Additionally it allows designers to customise colours
- Though their main feature is animation , LivIcons can be used as static icons as well. So there is no hard and fast rule
- LivIcons support two types of events: ‘click’ and 'hover’.
- Animation can be repeated infinitely if appropriate.
- Matches to different icons with traditional colors, such as browsers,social networks etc
- With power of jQuery and Raphael LivIcons (live icons) bring a fresh look of your site.
- They generally refer a perfect look at 16 px (Not in IE6 - IE8)
- Just one <div>, <span>, <li> or <i> with class .livicon and some data- attributes
- LivIcons currently support Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 12.1+, Internet Explorer 6.0+, iOS Safari3.2+, Android Browser 3.0+, Blackberry Browser 7.0+
- For webkit browsers you can apply css filter 'drop-shadow’
- LivIcons are vectors, which mean they are presented perfect on high-resolution displays.( eg Retina)
- They already come with jQuery and Wordpress plugin's for ease of use
Download them here.