LivIcons

Truly animated icon pack with power of scalable vector graphic for clean and perfect look at any devices.

jQuery Plugin

WordPress Plugin

404 414 icons. One script.

363 live + 51 static. This is not images. This is animated Vector Graphic.

New step in interactivity

With power of jQuery and Raphael LivIcons (live icons) bring a fresh look of your site.

Brand New

Such animation methods for interface elements were never created before.

Animated and static

Most important feature of LivIcons, that they are live. But they can be static too.

Any color, any size

Scalable vector graphics means every icon looks awesome at any size.

Retina perfect

LivIcons are vectors, which mean they are presented perfect on high-resolution displays.

16 pixel perfect

LivIcons were created with keep in mind about perfect look at 16 px (Not in IE6 - IE8).

Bootstrap compatible

Easy to integrate with Bootstrap. Look at example below.

CTR improvement

LivIcons let you increase CTR (click through ratio) on your sites.

Easy integration

Just one <div>, <span>, <li> or <i> with class .livicon and some data- attributes

Flexible settings

User friendly settings for custom look and behaviour of every icon or all of them.

Free updates

LivIcons are very interesting technology to continue supporting.

IE6+ support

LivIcons support IE6 and up. Just add one more small script for IE6 - IE7.

All browsers

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+

Customizer included

Small payload if you subset just the icons you need.

Show some love:

The following is a list of LivIcons in 32px in the alphabetical order in an each group. Hover an icon to see its animation (not all ones on this demo site) and name.


New animated icons

Demo Mode!

On this demo site the most part of the icons are in a static mode with disabled animation to prevent an unauthorized use. To see all of them in action please look at the LivIcons preview video below.

New animated icons

New static (Brand) icons

Demo Mode!

On this demo site the most part of the icons are in a static mode with disabled animation to prevent an unauthorized use. To see all of them in action please look at the LivIcons preview video below.

Demo Mode!

On this demo site the most part of the icons are in a static mode with disabled animation to prevent an unauthorized use. To see all of them in action please look at the LivIcons preview video below.

Demo Mode!

On this demo site the most part of the icons are in a static mode with disabled animation to prevent an unauthorized use. To see all of them in action please look at the LivIcons preview video below.

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.

Demo Mode!

On this demo site the most part of the icons are in a static mode with disabled animation to prevent an unauthorized use. To see all of them in action please look at the LivIcons preview video below.

Demo Mode!

On this demo site the most part of the icons are in a static mode with disabled animation to prevent an unauthorized use. To see all of them in action please look at the LivIcons preview video below.

'c' means circle, 'o' - octagon, 's' - square, 't' - triangle

The following is a preview of appearance and behavior of LivIcons.

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 size with good look at any devices. And, of course, any color can be applied too.

  • 16 px
  • 24 px
  • 32 px
  • 48 px
  • 56 px
  • 64 px
  • 96 px

The main feature is LivIcons are animated, but they can be static like any other icons too.

We are animated!

We are static.

LivIcons support two types of events: 'click' and 'hover'.

We live on 'click'.

We live on 'hover'.

Animation can be repeated infinitely if appropriate.

Please don't get carried away with this option.

Click to start/stop animations.

This option matches to different icons with traditional colors, such as browsers, social networks etc.

Note: Not animated from v1.1!

Icons with 'original' colors.

For webkit browsers you can apply css filter 'drop-shadow'.

Note: work in Chrome 18.0+, Safari 6.0+, iOS Safari 6.0+, Blackberry Browser 10.0+, Chrome for Android 25.0+

We have a shadow.

You can trigger events 'click' or 'hover' on an icon itself or on its parent element.

'Onparent' option.

For spinner icons the special behavior is defined. If looped they work as traditional spinners.

On this demo 'loop' is disabled. This is pseudo loop, just 10 iterations.

  • I'm looped.
  • I'm not.

Morphs are a special category recomended to use as backgrounds for any desired block.

Note: Childs elements need absolute positioning.

Morphs behavior is totaly different from other icons.

Demo Mode!

On this demo site you can see LivIcons with animation in process. This may be distracting, but it's because this is ... the DEMO!

I recommend to use these icons with animation turned on when you really need a strong attention effect.

Use LivIcons in:

  • Bulleted lists
  • Buttons
  • Button groups
  • Navigation
  • Form fields
  • And anywhere you like!


Promo 1 example

Why choose us

Vivamus tincidunt accumsan venenatis. Mauris sed od interdum egestas. In hendrerit elit nec urna blandit vehicula.

More about us

always on time

Pellentesque dictum nulla a lectus faucibus volutpat. Nullam aliquam, nunc et massa.

quality testing

Donec gravida, est id molestie fringilla, eros diam blandit mi, sit amet lectus eget lorem.

fast delivery

Aliquam erat volutpat. Ut sed lectus eget nulla fringilla rutrum at eu elit gordina.


Promo 2 example

Retina Perfect

Vivamus tincidunt accumsan venenatis. Mauris sed odio et turpis interdum egestas.

HTML5 Ready

Pellentesque dictum nulla a lectus faucibus volutpat. Nullam aliquam, nunc et sollicitudin.

Fully Responsive

Aliquam erat volutpat. Ut sed lectus eget nulla fringilla rutrum at eu elit.

  • iphone

    Certified and tested

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

    Read more

  • iphone

    Exclusive offer

    Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    We accept:     

  • iphone

    Free gift today!

    Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in egestas.


Stay in Touch

1-800-123-456-789
company.name



Planning and Strategy



Step by Step Realisation



Strict Deadlines



After Sales Support

  • You

  • decide

  • when

  • and where

The integration of Livicons is very simple.

  1. Copy two or three scripts to your server.
  2. In your html or php reference the location to these scripts.
  3. And use LivIcons with just one string of code...
<i class="livicon" data-...></i>
  or
<span class="livicon" data-...></span>
  or
<div class="livicon" data-...></div>
  or
<li class="livicon" data-...></li>

Additional way is to work with LivIcons 'on the fly' with help of three Javascript methods

$('my_cool_icon').addLivicon(...options...);
  or
$('my_cool_icon').removeLivicon(...option...);
  or
$('my_cool_icon').updateLivicon(...options...);
  or even
$('.my_cool_icons_class').addLivicon(...options...);
The ALL necessary information is available in a documentation included in the download package.

With the Customizer included in the package for jQuery plugin you can simply and fast choose what icons you need for your project and get the compact code. Please look at slides for fast preview.

The ALL necessary information is available in a documentation included in the download package.

The integration of Livicons in WordPress is very simple too.

  1. Install the plugin usually as any other one.
  2. Make any desired changes on the global settings page.
  3. And now you can prepare and paste any LivIcon in a TinyMCE editor.

Of course you don't need any program skills to use LivIcons in WordPress.

The ALL necessary information is available in a documentation included in the download package.

On the Global Settings page of LivIcons in your Wordpress dashboard you can also simply and fast choose what icons you need for your site and define defaults values for all parameters. Please look at slides for fast preview.

The ALL necessary information is available in a documentation included in the download package.

You can also look at this video preview to know how to work with livIcons in Wordpress.




Other Projects by DeeThemes