Avendor Custom Icons

We put together with the help of Fontastic a list of over 2130 icons and made a font for you to use in your design.

Larger Icons

       

Custom Color

       

Over 1500 Icons

We provide over 1500 icons and bellow you can see a sample of those icons and the coresponding Name to use.

Please check the below Frame to see ALL the available icons and the Names to use in your design. Easy working with Shortcodes and a Button at each Article to choose one.

Font Awesome Icons

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Check for Updates

Larger Icons

       

Use Icons in Lists

Custom Colors

       

Use Icons in Buttons

{icon-fa name="fa-heart" size="fa-3x" color="color-theme"}

Possible Values for size:
  fa-lg
  fa-2x
  fa-3x
  fa-4x
  fa-5x

Possible Values for color:
  color-text
  color-theme
  color-dark
  color-grey
  color-success
  color-info
  color-warning
  color-danger
  color-white

Icon Wrappers

{icon-round-border size="3x" color="color-text"}
  {icon-fa name="fa-building-o"}
{/icon}

{icon-round-full size="3x" bgcolor="color-theme" color="color-white"}
  {icon-fa name="fa-apple"}
{/icon}

{icon-square-border size="3x" color="color-text"}
  {icon-fa name="fa-bomb"}
{/icon}

{icon-square-full size="3x" bgcolor="color-theme" color="color-white"}
  {icon-fa name="fa-space-shuttle"}
{/con}

Possible Values for size:
  1x
  2x
  3x

Possible Values for color (also Background):
  color-text
  color-default
  color-dark
  color-grey
  color-success
  color-info
  color-warning
  color-danger
  color-white

Icon Boxes

Build simple and elegant icon boxes in easy steps. All the styles bellow can be combined as you think is better for your design.

Default Wrappers

Simple Iconbox

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

Custom Color

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

Custom Text

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

{iconbox}
  {icon-round-full bgcolor="color-grey" color="color-danger"}
    {icon-fa name="fa-heart"}
  {/icon}
  {iconbox-content}
  {h4 class="bold"}Simple Iconbox{/h4}
  Content of the Box here
{/iconbox}

Vertical Centered Wrappers

Simple Iconbox

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

Custom Color

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

Custom Text

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

{iconbox style="vertical"}
  {icon-square-full size="2x" bgcolor="color-warning" color="color-white"}
    {icon-fa name="fa-space-shuttle"}
  {/icon}
  {iconbox-content}
  {h4 class="bold"}Simple Iconbox{/h4}
  Content of the Box here
{/iconbox}

Animated Icon Boxes

Simple Iconbox

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

Custom Color

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

Custom Text

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

{iconbox style="vertical"}
  {icon-livicon name="briefcase" size="80" color="#F7505A" colorhover="#F7505A" animate="true" loop="false" iteration="1" duration="auto" onparent="true"}
  {iconbox-content}
  {h4 class="bold"}Simple Iconbox{/h4}
  Content of the Box here
{/iconbox}

Panels Icon Boxes

Simple Iconbox

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

Learn More

Custom Color

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

Learn More

Custom Color

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

Learn More
{iconbox-panel bgcolor="color-success"}
  {icon-livicon name="briefcase" size="80" color="#fff" colorhover="#fff" animate="true" loop="false" iteration="1" duration="auto" onparent="true"}
  {iconbox-content}
  {h4 class="bold" color="color-white"}Simple Iconbox{/h4}
  Content of the Box here
{/iconbox-panel}

Alternative Panels Icon Boxes

Simple Iconbox

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

Learn More

Simple Iconbox

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

Learn More

Simple Iconbox

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

Learn More
{iconbox-panel bgcolor="color-success"}
  {icon-square-border color="color-white" size="2x"}
    {icon-fa name="fa-heart"}
  {/icon}
  {iconbox-content}
  {h4 class="bold" color="color-white"}Simple Iconbox{/h4}
  Content of the Box here
{/iconbox-panel}

LivIcons / Animated Icons

Livicons are Over 350 Icons animated vector icons (except brand names ones), so there are not any images like JPGs, PNGs or GIFs. All their appearance and behaviour are based on Javascript program code. So they can be animated or static, with any color and size with good look at usual and high resolution devices.

View On Codecanyon

LivIcons Sizes

Define the size of the icon by simply using the "data-s" option provided in the plugin.

Custom Colors

Define the any color for the icons and ofcourse the color change on hover of an icon.

LivIcons Speed

Define the speed of the animation using the "data-d" option and you can have fast or slow animation.

LivIcons Loop

"Data-l" option can make the icon on mouse hover have the animation repeated at infinit.

LivIcons Wrapper

Animation is triggered when you hover over the parrent element of the icon.

Quisque sagittis lacus eu lorem sodales, id vulputate velit adipiscing. Aenean adipiscing, sem sit amet mollis aliquet.

We're Back Baby!

LivIcons Buttons

Can be used inside the theme button and the animation is trigered when the user hover the button.

Order Today

Download Now

Attention: cause the Color for Livicons is defined in the Shortcode, they will not work with the Template Switcher here on this Demo used.
{icon-livicon
  name="tags"
  size="16"
  color="#f7505a"
  colorhover="#778899"
  animate="true"
  loop="false"
  iteration="3"
  duration=""
  onparent="false"
  class="iconright"
}

A lot of options at the first look but no worry, you have a comfortable
and easy to use editor for it in the Backend!

Icon Lists

Using the icons provided in the theme you can build nice styled icon lists. Bellow you can see the styles provided in the theme.

Simple Icon Lists

  • Aenean eget mi eget
  • Sed arcu eros lacinia
  • Duis dictum purus
  • Integer sodales justo
  • Etiam in sem et lectus
  • Aenean eget mi eget
  • Sed arcu eros lacinia
  • Duis dictum purus
  • Integer sodales justo
  • Etiam in sem et lectus
  • Aenean eget mi eget
  • Sed arcu eros lacinia
  • Duis dictum purus
  • Integer sodales justo
  • Etiam in sem et lectus
{list class="list-default fa-ul"}
  {listing}{icon-fa name="fa-thumbs-up fa-li"}Aenean eget mi eget{/listing}
  ...
  ...
{/list}

{list class="list-default fa-ul"}
  {listing}{icon-avendor name="camera-2 fa-li"}Aenean eget mi eget{/listing}
  ...
  ...
{/list}

{list class="list-default fa-ul"}
  {listing}{icon-livicon name="sun" size="20" color="#778899" colorhover="#f7505a" animate="true" loop="false" iteration="3" duration="auto" onparent="true"}Aenean eget mi eget{/listing}
  ...
  ...
{/list}

Custom Color Icon Lists

  • Aenean eget mi eget
  • Sed arcu eros lacinia
  • Duis dictum purus
  • Integer sodales justo
  • Etiam in sem et lectus
  • Aenean eget mi eget
  • Sed arcu eros lacinia
  • Duis dictum purus
  • Integer sodales justo
  • Etiam in sem et lectus
  • Aenean eget mi eget
  • Sed arcu eros lacinia
  • Duis dictum purus
  • Integer sodales justo
  • Etiam in sem et lectus
{list class="list-default fa-ul"}
  {listing}{icon-fa name="fa-thumbs-up fa-li" color="color-info"}Aenean eget mi eget{/listing}
  ...
  ...
{/list}

{list class="list-default fa-ul"}
  {listing}{icon-avendor name="camera-2 fa-li" color="color-info"}Aenean eget mi eget{/listing}
  ...
  ...
{/list}

{list class="list-default fa-ul"}
  {listing}{icon-livicon name="sun" size="20" color="#22d2d2" colorhover="#f7505a" animate="true" loop="false" iteration="3" duration="auto" onparent="true"}Aenean eget mi eget{/listing}
  ...
  ...
{/list}

Divider Icon Lists

  • Aenean eget mi eget
  • Sed arcu eros lacinia
  • Duis dictum purus
  • Integer sodales justo
  • Etiam in sem et lectus
  • Aenean eget mi eget
  • Sed arcu eros lacinia
  • Duis dictum purus
  • Integer sodales justo
  • Etiam in sem et lectus
  • Aenean eget mi eget
  • Sed arcu eros lacinia
  • Duis dictum purus
  • Integer sodales justo
  • Etiam in sem et lectus
{list class="list-default divider-list fa-ul"}
  {listing}{icon-fa name="fa-thumbs-up fa-li"}Aenean eget mi eget{/listing}
  ...
  ...
{/list}

{list class="list-default divider-list fa-ul"}
  {listing}{icon-avendor name="camera-2 fa-li" color="color-info"}Aenean eget mi eget{/listing}
  ...
  ...
{/list}

{list class="list-default divider-list fa-ul"}
  {listing}{icon-livicon name="sun" size="20" color="#22d2d2" colorhover="#f7505a" animate="true" loop="false" iteration="3" duration="auto" onparent="true"}Aenean eget mi eget{/listing}
  ...
  ...
{/list}

Big Icon Lists

  • Aenean eget mi eget
  • Sed arcu eros lacinia
  • Duis dictum purus
  • Integer sodales justo
  • Etiam in sem et lectus
  • Aenean eget mi eget
  • Sed arcu eros lacinia
  • Duis dictum purus
  • Integer sodales justo
  • Etiam in sem et lectus
  • Aenean eget mi eget
  • Sed arcu eros lacinia
  • Duis dictum purus
  • Integer sodales justo
  • Etiam in sem et lectus
{list class="list-default divider-list biglist fa-ul"}
  {listing}{icon-fa name="fa-thumbs-up fa-li"}Aenean eget mi eget{/listing}
  ...
  ...
{/list}

{list class="list-default divider-list biglist fa-ul"}
  {listing}{icon-avendor name="camera-2 fa-li" color="color-info"}Aenean eget mi eget{/listing}
  ...
  ...
{/list}

{list class="list-default divider-list biglist fa-ul"}
  {listing}{icon-livicon name="sun" size="20" color="#22d2d2" colorhover="#f7505a" animate="true" loop="false" iteration="3" duration="auto" onparent="true"}Aenean eget mi eget{/listing}
  ...
  ...
{/list}

IconBox Icon Lists

100% Responsive Layout

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.

Clean HTML5 and CSS3

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.

Interactive Elements

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.

100% Responsive Layout

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.

Clean HTML5 and CSS3

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.

Interactive Elements

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.

100% Responsive Layout

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.

Clean HTML5 and CSS3

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.

Interactive Elements

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.

{iconbox}
  {icon-round-full bgcolor="color-grey" color="color-text" class="animation bounceIn"}
    {icon-fa name="fa-desktop"}
  {/icon}
  {iconbox-content}
  {h5 class="bold"}100% Responsive Layout{/h5}
  {p}Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.{/p}
{/iconbox}

Please look the Shortcodes for the Icon Boxes

IconBox Icon Lists

100% Responsive Layout

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.

Clean HTML5 and CSS3

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.

Interactive Elements

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.

100% Responsive Layout

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.

Clean HTML5 and CSS3

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.

Interactive Elements

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.

{iconbox class="animation fadeInLeft"}
  {icon-round-border color="color-text" size="2x" class="pull-right"}
    {icon-fa name="fa-desktop"}
  {/icon}
  {iconbox-content}
  {h5 class="bold text-right"}100% Responsive Layout{/h5}
  {p class="text-right"}Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.{/p}
{/iconbox}

{iconbox class="animation fadeInRight"}
  {icon-round-full bgcolor="color-default" color="color-white" size="2x"}
    {icon-fa name="fa-desktop"}
  {/icon}
  {iconbox-content}
  {h5 class="bold"}100% Responsive Layout{/h5}
  {p}Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.{/p}
{/iconbox}

Please look also the Shortcodes for the Icon Boxes