LivIcons - 303 Truly Animated Vector Icons


This is a jQuery version, WordPress Plugin is available here.


What we see as developers when we open every new site?

Usually we see different blocks with menus, sliders, widgets, main thing – content and of course, icons. Generally most of them are interactive, except content and… icons!

So I thought: ‘Maybe we can break this stereotype?’ Thus the idea of LivIcons (live Icons) was born. But if I knew that this project would take four months of hard daily work, maybe I would not had started it. However, here you can see the result.

So what are LivIcons? They are a cross browser vector icons, built with JavaScript, with individual mini animation for every icon (except ‘Brand names’ ones). They based on SVG (scalable vector graphic) in modern browsers and VML (vector markup language) in IE6 – IE8 for clean and perfect look at any devices (Yes. Retina too).

Main features:

  • 363 live + 51 static = 414 total (from v1.4) icons in one script.
  • New step in interactivity and brand New – such animation methods for interface elements were never created before.
  • Animated and can be static of course
  • Any color, any size
  • Retina perfect
  • 16 pixel perfect
  • Flexible settings of behavior and appearance
  • Bootstrap compatible
  • Easy integration – just one string of code for an icon.
  • Dynamic add, remove and update with three JavaScript methods (from v1.2)
  • Color change for ‘active’ class (from v1.2)
  • IE6+ support
  • All browsers (almost ;) )
  • Free updates
  • Adobe Illustrator files with all picktograms for your design purpose.
  • Customizer with simple three steps let you choose what you exactly need.

Requirements:

  • jQuery 1.6.3 and up
  • A modern fast browser for work with the Customizer

License:

You need to purchase a regular or an extended license of LivIcons for every web project.

ThemeForest Authors:

Due to frequent requests from other authors I decided to let using LivIcons in your themes (templates). If you’d like to include my plugin in your product you can do that under the following conditions:

  1. I give a permission to include LivIcons in ThemeForest’s items only! Not on any other site(s)
  2. You need to purchase one (1) extended license for every theme (template)
  3. You must email me through a contact form (not directly) on my profile page with your theme (template) name where you plan to use LivIcons
  4. Please credit LivIcons on your item’s page
  5. Good luck with sales!

Important note:

From v1.1 the animation of any ‘Brand name’ icons, like socials, browsers, JS libs, etc., is removed because it may violate developers’ terms of service of their respective copyright owners. So from now these icons are not animated. Thanks for the understanding.

Special Thanks:

  • Special thanks to Dmitry Baranovskiy, the author of Raphaël – JavaScript Library.
  • Special thanks to jQuery team for outstanding work makes our job easier.
  • Special thanks to Douglas Crockford for json2 script, which lets IE6 -IE7 to work with JSON format.
  • Special thanks to Dusty Jewett for the help with JS code improvement.
  • Some icons are based on pictographs from various open sources with appropriate license for commercial use, modify and alter with no attribution required.

Change log:

2014, October, 1 - v1.4
- added 10 new animated icons
- small bug fix
2013, July, 24 - v1.3
- added new 9 animated and 18 static icons
- now not needed jQuery method .each() to add, remove or update LivIcons for any class when work via JavaScript
- script will not add a LivIcon to a container with already existing icon
- made some code improvement for more accurate behavior when you have any LivIcon inline in Morph icons
- updated the documentation
- updated the Customizer
- updated Adobe Illustrator files
2013, May, 20 - v1.2
- added 65 new animated icons
- added the ability to work with icons dynamically via three new JavaScript methods
- added support for changing a color for any 'active' class of icons or their parents' elements
- script will not override the IDs which is defined for HTML element with LivIcon
- some code improvement
- updated the documentation
- updated the Customizer
- updated Adobe Illustrator files
2013, May, 06 - v1.1.1
- small bug fix for IE6 - IE8
2013, May, 05 - v1.1
- removed all animations from 'Brand names' icons
- removed 'twitter-alt-alt' icon
- added ten new icons
- added new 'data-duration' or 'data-d' parameter for changing animation speed.
- updated the documentation
- updated the Customizer
- updated Adobe Illustrator files
2013, May, 01 - v1.0 - initial release

If you’re impressed with SVG possibilities, you may also like:









by
by
by
by
by
by