close× Call Us +1 (777) 123 45 67
close×

LivIcons

Features

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

Any color, any size

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.


  • Created with Raphaël 2.1.2
    16 px
  • Created with Raphaël 2.1.2
    24 px
  • Created with Raphaël 2.1.2
    32 px
  • Created with Raphaël 2.1.2
    48 px
  • Created with Raphaël 2.1.2
    56 px
  • Created with Raphaël 2.1.2
    64 px
  • Created with Raphaël 2.1.2
    96 px

Animated and static

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

We are animated!

  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2

We are static.

  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2

Click and hover events

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

We live on 'click'.

  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2

We live on 'hover'.

  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2

Looped animation

Animation can be repeated infinitely if appropriate.

Please don't get carried away with this option.

Click to start/stop animations.

  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2

Original colors by default

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.

  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2

Shadowed

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.

  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2

Animation start with event on an icon or on its parent

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

'Onparent' option.

Spinners

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.

  • Created with Raphaël 2.1.2
    I'm looped.
  • Created with Raphaël 2.1.2
    I'm not.

Morphs

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.

  • Created with Raphaël 2.1.2
  • Created with Raphaël 2.1.2

Examples - where to use

Examples from the Twitter Bootstrap documentation


Use LivIcons in:

  • Created with Raphaël 2.1.2 Bulleted lists
  • Created with Raphaël 2.1.2 Buttons
  • Created with Raphaël 2.1.2 Button groups
  • Created with Raphaël 2.1.2 Navigation
  • Created with Raphaël 2.1.2 Form fields
  • Created with Raphaël 2.1.2 And anywhere you like!



Created with Raphaël 2.1.2 Created with Raphaël 2.1.2 Created with Raphaël 2.1.2 Created with Raphaël 2.1.2


Created with Raphaël 2.1.2 Reload Created with Raphaël 2.1.2 Checkout Created with Raphaël 2.1.2 Delete

Created with Raphaël 2.1.2 Settings Created with Raphaël 2.1.2 Info

Created with Raphaël 2.1.2 User Created with Raphaël 2.1.2




Call-to-action buttons

Different types of promo and intro

Promo 1 example
Promo 2 example
Created with Raphaël 2.1.2
Web Design
Content management systens Virtual shops and ecommerce Presentation websites Online catalogues
Created with Raphaël 2.1.2
Graphic Design
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those intereste.
Created with Raphaël 2.1.2
Internet Marketing
Content management systens Virtual shops and ecommerce Presentation websites Online catalogues

Metro style

Created with Raphaël 2.1.2 Created with Raphaël 2.1.2 Created with Raphaël 2.1.2 Created with Raphaël 2.1.2 Created with Raphaël 2.1.2 Created with Raphaël 2.1.2 Created with Raphaël 2.1.2 Created with Raphaël 2.1.2 Created with Raphaël 2.1.2 Created with Raphaël 2.1.2 Created with Raphaël 2.1.2 Created with Raphaël 2.1.2 Created with Raphaël 2.1.2

Pricing

First Package
Created with Raphaël 2.1.2
The generated Lorem Ipsum is therefore always free from repetition, injected humour.
Starting at
$199/month
Read more
Second Package
Created with Raphaël 2.1.2
The generated Lorem Ipsum is therefore always free from repetition, injected humour.
Starting at
$299/month
Read more
Third Package
Created with Raphaël 2.1.2
The generated Lorem Ipsum is therefore always free from repetition, injected humour.
Starting at
$399/month
Read more

Full Icon List

New in LivIcons

Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2

Miscellaneous Web Icons

Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2

Arrows and Directional Icons

Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2

Text Control Icons

Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2

Video Player Icons

Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2

Socials, OSs, Browsers, JS libs and others Icons (not animated) - Just Static

Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2

Spinner Icons

Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2

Morphs Icons

Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2
Created with Raphaël 2.1.2