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-v4/v4/css/vicon.min.css">
<link rel="stylesheet" href="https://vicpra.com/vicpra-icons-v4/v4/css/vicon.css">
Vicpra Image
Step 2 :

After applying it on the head, go to the vicpra icons tab, and then do it anywhere.

Press Ctrl+c to copy key after hover the icon then copy and apply:

<i class="vicon vicon-home-2-fill"></i>
<i class="vicon vicon-home-5-line"></i>
Vicpra Image Vicpra Image
Styling:

You can change size of the icon withfont-size CSS. It will inherit the font-sizefrom 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-thumb-up-fill vicon-xs"></i>
<i class="vicon vicon-thumb-up-fill vicon-md"></i>
<i class="vicon vicon-thumb-up-fill vicon-sm"></i>
<i class="vicon vicon-thumb-up-fill vicon-lg"></i>
Rotation & Flipping:

You can import any of these:

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

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

You can see example:

<i class="vicon vicon-thumb-up-fill vicon-rotate-90"></i>
<i class="vicon vicon-thumb-up-fill vicon-rotate-180"></i>
<i class="vicon vicon-thumb-up-fill vicon-rotate-270"></i>
<i class="vicon vicon-thumb-up-fill vicon-flip-horizontal"></i>
<i class="vicon vicon-thumb-up-fill vicon-flip-vertical"></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-arrow-right-line'></i>List Item 1</li>
                        <li><i class='vicon vicon-account-box-fill'></i>List Item 2</li>
                        <li><i class='vicon vicon-add-circle-line'></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-facebook-box-fill"></i>
Facebook
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-double-quotes-l 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.
Border:

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

You can see example:

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

You can import any of these:

<link rel="stylesheet" href="https://vicpra.com/vicpra-icons-v4/v4/css/vicon.min.css">
<link rel="stylesheet" href="https://vicpra.com/vicpra-icons-v4/v4/css/animations.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-right You 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-advertisement-fill vicon-spin"></i>
<i class="vicon vicon-alarm-fill vicon-tada"></i>
<i class="vicon vicon-add-circle-fill vicon-flashing"></i>
<i class="vicon vicon-aliens-fill vicon-burst"></i>
<i class="vicon vicon-android-fill vicon-fade-left"></i>
<i class="vicon vicon-apple-fill vicon-fade-up"></i>
<i class="vicon vicon-bank-fill vicon-fade-down"></i>
<i class="vicon vicon-heart-3-fill vicon-fade-right"></i>
Animation on Hover:

You can import any of these:

<link rel="stylesheet" href="https://vicpra.com/vicpra-icons-v4/v4/css/vicon.min.css">
<link rel="stylesheet" href="https://vicpra.com/vicpra-icons-v4/v4/css/animations.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-hover You 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-advertisement-fill vicon-spin-hover"></i>
<i class="vicon vicon-alarm-fill vicon-tada-hover"></i>
<i class="vicon vicon-add-circle-fill vicon-flashing-hover"></i>
<i class="vicon vicon-aliens-fill vicon-burst-hover"></i>
<i class="vicon vicon-android-fill vicon-fade-left-hover"></i>
<i class="vicon vicon-apple-fill vicon-fade-down-hover"></i>
<i class="vicon vicon-bank-fill vicon-fade-up-hover"></i>
<i class="vicon vicon-heart-3-fill 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