How to use!!

Step 1 :

First of all, it has to be linked on the head section of your website, for that go to the source code of your website and copy it in its head section.

=>Copy Any one :

<link rel="stylesheet" href="https://vicpra.com/vicpra-icons-v5/v5/css/vicon.css">
<link rel="stylesheet" href="https://vicpra.com/vicpra-icons-v5/v5/css/vicon.min.css">
Vicpra Image
Step 2 :

After applying it on the head, go to the vicpra icons tab, and then search your icon.

Click on the icon to copy:

For Unicode Press Ctrl+c to copy:

<i class="vicon vicon-github"></i>
<i class="vicon vicon-cards-heart"></i>
Vicpra ImageVicpra Image
Styling:

You can change size of the icon with font-size in CSS. It will inherit the font-size from the parent by default. There are fixed sizes you can add to the icon by adding classes vicon-xs,vicon-sm,vicon-md and vicon-lg.

You can see example:

<i class="vicon vicon-cards-heart vicon-xs"></i>
<i class="vicon vicon-cards-heart vicon-md"></i>
<i class="vicon vicon-cards-heart vicon-sm"></i>
<i class="vicon vicon-cards-heart vicon-lg"></i>
List Icons:

Use icons as bullets for the list by adding class vicon-ul to the unordered list element and include the icons inside the li

You can see example:

    
    <ul class='vicon-ul'>
    <li><i class='vicon vicon-cards-heart'></i>List Item 1</li>
    <li><i class='vicon vicon-cards-heart'></i>List Item 2</li>
    <li><i class='vicon vicon-cards-heart'></i>List Item 3</li>
    </ul>
    
  
  • List Item 1
  • List Item 2
  • List Item 3
Fixed Width:

You can use fixed width class vicon-fw \to get a fixed width icon next to the text li

You can see example:

<i class="vicon-fw vicon vicon-youtube"></i>
Youtube
Pulled Icons:

Use class vicon-pull-left or vicon-pull-right on icons for easy pull quotes li

You can see example:

<i class="vicon-pull-left vicon vicon-format-quote-close vicon-lg"></i>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga esse illum deserunt quos accusantium at maxime architecto corrupti consectetur sint, omnis earum! Cupiditate a voluptatem debitis officia rerum similique corrupti maiores omnis, asperiores recusandae ipsum quidem assumenda quaerat, deserunt dicta.
Rotation & Flipping:

You can import any of these:

<link rel="stylesheet" href="https://vicpra.com/vicpra-icons-v5/v5/css/vicon.min.css">
<link rel="stylesheet" href="https://vicpra.com/vicpra-icons-v5/v5/css/vicon.css">

Rotate the icons using classes vicon-rotate-90, vicon-rotate-180 and vicon-rotate-270 or Flip the icons using vicon-flip-horizontally and vicon-flip-vertically

You can see example:

<i class="vicon vicon-axis-z-arrow vicon-rotate-90"></i>
<i class="vicon vicon-axis-z-arrow vicon-rotate-180"></i>
<i class="vicon vicon-axis-z-arrow vicon-rotate-270"></i>
<i class="vicon vicon-axis-z-arrow vicon-flip-horizontally"></i>
<i class="vicon vicon-axis-z-arrow vicon-flip-vertically"></i>
Border:

Add border to your icons with classes vicon-border, vicon-border-circle

You can see example:

<i class="vicon vicon-language-html5 vicon-border"></i>
<i class="vicon vicon-language-html5 vicon-border-circle"></i>
Animation:

You can import any of these:

<link rel="stylesheet" href="https://vicpra.com/vicpra-icons-v5/v5/css/vicon.min.css">
<link rel="stylesheet" href="https://vicpra.com/vicpra-icons-v5/v5/css/vicon.css">

Animate your icons with pre built CSS animations using classes vicon-spin,vicon-tada,vicon-flashing,vicon-burst,vicon-fade-left,vicon-fade-up,vicon-fade-down and vicon-fade-rightYou can change the speed of the animation with the animation-duration property & to change the number of times the animation takes place with the property animation-iteration-count in CSS

You can see example:

<i class="vicon vicon-heart-multiple vicon-spin"></i>
<i class="vicon vicon-arrow-down-thick vicon-tada"></i>
<i class="vicon vicon-clouds vicon-flashing"></i>
<i class="vicon vicon-human-walker vicon-burst"></i>
<i class="vicon vicon-robot-vacuum-alert vicon-fade-left"></i>
<i class="vicon vicon-diving-scuba vicon-fade-up"></i>
<i class="vicon vicon-account vicon-fade-down"></i>
<i class="vicon vicon-airplane vicon-fade-right"></i>
Animation on Hover:

You can import any of these:

<link rel="stylesheet" href="https://vicpra.com/vicpra-icons-v5/v5/css/vicon.min.css">
<link rel="stylesheet" href="https://vicpra.com/vicpra-icons-v5/v5/css/vicon.css">

Animate your icons on hover with pre built CSS animations using classes vicon-spin-hover,vicon-tada-hover,vicon-flashing-hover,vicon-burst-hover,vicon-fade-left-hover,vicon-fade-down-hover,vicon-fade-up-hover and vicon-fade-right-hoverYou can change the speed of the animation with the animation-duration property & to change the number of times the animation takes place with the property animation-iteration-count in CSS

You can see example:

<i class="vicon vicon-heart-multiple vicon-spin-hover"></i>
<i class="vicon vicon-arrow-down-thick vicon-tada-hover"></i>
<i class="vicon vicon-clouds vicon-flashing-hover"></i>
<i class="vicon vicon-human-walker vicon-burst-hover"></i>
<i class="vicon vicon-robot-vacuum-alert vicon-fade-left-hover"></i>
<i class="vicon vicon-diving-scuba vicon-fade-down-hover"></i>
<i class="vicon vicon-account vicon-fade-up-hover"></i>
<i class="vicon vicon-airplane vicon-fade-right-hover"></i>

Hover the mouse below:

Feedback:

You can give us feedback if there is any problem in the icon Contact Here