Flash Icons | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Flash Icons

##### Pulse Animations

You can use the `main-animate` and `pulse-wrapper` classes for the pulse animation.

###### Stroke Icons

###### Fill Icons

###### Feather Icons

###### Ico Icons

###### Fontawesome Icons

    <div class="card-body pulse-wrapper main-animate">
     <div class="grid grid-cols-12 card-gap">
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Stroke Icons</h6>
           <div class="common-flex">
             <a href="#!">
               <svg class="stroke-icon">
                 <use href="../assets/svg/icon-sprite.svg#stroke-calendar"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="stroke-icon">
                 <use href="../assets/svg/icon-sprite.svg#stroke-ui-kits"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="stroke-icon">
                 <use href="../assets/svg/icon-sprite.svg#stroke-bookmark"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="stroke-icon">
                 <use href="../assets/svg/icon-sprite.svg#stroke-to-do"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="stroke-icon">
                 <use href="../assets/svg/icon-sprite.svg#stroke-table"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="stroke-icon">
                 <use href="../assets/svg/icon-sprite.svg#stroke-animation"></use>
               </svg>
             </a>
           </div>
         </div>
       </div>
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Fill Icons</h6>
           <div class="common-flex">
             <a href="#!">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#fill-calender"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#fill-ui-kits"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#fill-bookmark"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#fill-to-do"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#fill-table"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#fill-animation"></use>
               </svg>
             </a>
           </div>
         </div>
       </div>
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Feather Icons</h6>
           <div class="common-flex">
             <a href="#!">
               <i data-feather="gitlab"></i>
             </a>
             <a href="#!">
               <i data-feather="twitter"></i>
             </a>
             <a href="#!">
               <i data-feather="youtube"></i>
             </a>
             <a href="#!">
               <i data-feather="thumbs-up"></i>
             </a>
             <a href="#!">
               <i data-feather="instagram"></i>
             </a>
             <a href="#!">
               <i data-feather="github"></i>
             </a>
           </div>
         </div>
       </div>
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Ico Icons</h6>
           <div class="common-flex">
             <a href="#!">
               <i class="icofont icofont-hotel-boy-alt"></i>
             </a>
             <a href="#!">
               <i class="icofont icofont-boy"></i>
             </a>
             <a href="#!">
               <i class="icofont icofont-girl"></i>
             </a>
             <a href="#!">
               <i class="icofont icofont-business-man"></i>
             </a>
             <a href="#!">
               <i class="icofont icofont-man-in-glasses"></i>
             </a>
             <a href="#!">
               <i class="icofont icofont-business-man-alt-1"></i>
             </a>
           </div>
         </div>
       </div>
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Fontawesome Icons</h6>
           <div class="common-flex">
             <a href="#!">
               <i class="fa-regular fa-sun"></i>
             </a>
             <a href="#!">
               <i class="fa-brands fa-linux"></i>
             </a>
             <a href="#!">
               <i class="fa-brands fa-stack-overflow"></i>
             </a>
             <a href="#!">
               <i class="fa-brands fa-windows"></i>
             </a>
             <a href="#!">
               <i class="fa-brands fa-reddit-alien"></i>
             </a>
             <a href="#!">
               <i class="fa-brands fa-dropbox"></i>
             </a>
            </div>
         </div>
       </div>
     </div>
    </div>

##### Pulse Double Border Animations

You can use the `main-animate , border-pulse-wrapper ,` and `pulse-wrapper` classes for the double border pulse animation.

###### Stroke Icons

###### Fill Icons

###### Feather Icons

###### Ico Icons

###### Fontawesome Icons

    <div class="card-body pulse-wrapper main-animate border-pulse-wrapper">
     <div class="grid grid-cols-12 card-gap">
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Stroke Icons</h6>
           <div class="common-flex">
             <a href="#!">
               <svg class="stroke-icon">
                 <use href="../assets/svg/icon-sprite.svg#stroke-calendar"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="stroke-icon">
                 <use href="../assets/svg/icon-sprite.svg#stroke-ui-kits"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="stroke-icon">
                 <use href="../assets/svg/icon-sprite.svg#stroke-bookmark"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="stroke-icon">
                 <use href="../assets/svg/icon-sprite.svg#stroke-to-do"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="stroke-icon">
                 <use href="../assets/svg/icon-sprite.svg#stroke-table"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="stroke-icon">
                 <use href="../assets/svg/icon-sprite.svg#stroke-animation"></use>
               </svg>
             </a>
           </div>
         </div>
       </div>
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Fill Icons</h6>
           <div class="common-flex">
             <a href="#!">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#fill-calender"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#fill-ui-kits"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#fill-bookmark"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#fill-to-do"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#fill-table"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#fill-animation"></use>
               </svg>
             </a>
           </div>
         </div>
       </div>
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Feather Icons</h6>
           <div class="common-flex">
             <a href="#!">
               <i data-feather="gitlab"></i>
             </a>
             <a href="#!">
               <i data-feather="twitter"></i>
             </a>
             <a href="#!">
               <i data-feather="youtube"></i>
             </a>
             <a href="#!">
               <i data-feather="thumbs-up"></i>
             </a>
             <a href="#!">
               <i data-feather="instagram"></i>
             </a>
             <a href="#!">
               <i data-feather="github"></i>
             </a>
           </div>
         </div>
       </div>
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Ico Icons</h6>
           <div class="common-flex">
             <a href="#!">
               <i class="icofont icofont-hotel-boy-alt"></i>
             </a>
             <a href="#!">
               <i class="icofont icofont-boy"></i>
             </a>
             <a href="#!">
               <i class="icofont icofont-girl"></i>
             </a>
             <a href="#!">
               <i class="icofont icofont-business-man"></i>
             </a>
             <a href="#!">
               <i class="icofont icofont-man-in-glasses"></i>
             </a>
             <a href="#!">
               <i class="icofont icofont-business-man-alt-1"></i>
             </a>
           </div>
         </div>
       </div>
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Fontawesome Icons</h6>
           <div class="common-flex">
             <a href="#!">
               <i class="fa-regular fa-sun"></i>
             </a>
             <a href="#!">
               <i class="fa-brands fa-linux"></i>
             </a>
             <a href="#!">
               <i class="fa-brands fa-stack-overflow"></i>
             </a>
             <a href="#!">
               <i class="fa-brands fa-windows"></i>
             </a>
             <a href="#!">
               <i class="fa-brands fa-reddit-alien"></i>
             </a>
             <a href="#!">
               <i class="fa-brands fa-dropbox"></i>
             </a>
           </div>
         </div>
       </div>
     </div>
    </div>

##### Pulse Rhombus Animations

You can use the `main-animate , pulse-rhombus` and `pulse-wrapper` classes for the clippath shaped pulse animation.

###### Stroke Icons

###### Fill Icons

###### Feather Icons

###### Ico Icons

###### Fontawesome Icons

    <div class="card-body pulse-wrapper main-animate pulse-rhombus">
     <div class="grid grid-cols-12 card-gap">
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Stroke Icons</h6>
           <div class="common-flex">
             <a href="#!">
               <svg class="stroke-icon">
                 <use href="../assets/svg/icon-sprite.svg#stroke-calendar"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="stroke-icon">
                 <use href="../assets/svg/icon-sprite.svg#stroke-ui-kits"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="stroke-icon">
                 <use href="../assets/svg/icon-sprite.svg#stroke-bookmark"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="stroke-icon">
                 <use href="../assets/svg/icon-sprite.svg#stroke-to-do"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="stroke-icon">
                 <use href="../assets/svg/icon-sprite.svg#stroke-table"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="stroke-icon">
                 <use href="../assets/svg/icon-sprite.svg#stroke-animation"></use>
               </svg>
             </a>
           </div>
         </div>
       </div>
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Fill Icons</h6>
           <div class="common-flex">
             <a href="#!">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#fill-calender"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#fill-ui-kits"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#fill-bookmark"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#fill-to-do"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#fill-table"></use>
               </svg>
             </a>
             <a href="#!">
               <svg class="fill-icon">
                 <use href="../assets/svg/icon-sprite.svg#fill-animation"></use>
               </svg>
             </a>
           </div>
         </div>
       </div>
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Feather Icons</h6>
           <div class="common-flex">
             <a href="#!">
               <i data-feather="gitlab"></i>
             </a>
             <a href="#!">
               <i data-feather="twitter"></i>
             </a>
             <a href="#!">
               <i data-feather="youtube"></i>
             </a>
             <a href="#!">
               <i data-feather="thumbs-up"></i>
             </a>
             <a href="#!">
               <i data-feather="instagram"></i>
             </a>
             <a href="#!">
               <i data-feather="github"></i>
             </a>
           </div>
         </div>
       </div>
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Ico Icons</h6>
           <div class="common-flex">
             <a href="#!">
               <i class="icofont icofont-hotel-boy-alt"></i>
             </a>
             <a href="#!">
               <i class="icofont icofont-boy"></i>
             </a>
             <a href="#!">
               <i class="icofont icofont-girl"></i>
             </a>
             <a href="#!">
               <i class="icofont icofont-business-man"></i>
             </a>
             <a href="#!">
               <i class="icofont icofont-man-in-glasses"></i>
             </a>
             <a href="#!">
               <i class="icofont icofont-business-man-alt-1"></i>
             </a>
           </div>
         </div>
       </div>
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Fontawesome Icons</h6>
           <div class="common-flex">
             <a href="#!">
               <i class="fa-regular fa-sun"></i>
             </a>
             <a href="#!">
               <i class="fa-brands fa-linux"></i>
             </a>
             <a href="#!">
               <i class="fa-brands fa-stack-overflow"></i>
             </a>
             <a href="#!">
               <i class="fa-brands fa-windows"></i>
             </a>
             <a href="#!">
               <i class="fa-brands fa-reddit-alien"></i>
             </a>
             <a href="#!">
               <i class="fa-brands fa-dropbox"></i>
             </a>
           </div>
         </div>
       </div>
     </div>
    </div>

##### Pulse Colored Animations

You can use the `main-animate , pulse-rabbet ,` and `pulse-wrapper` classes for the colored SVG pulse animation.

###### Stroke Icons

###### Fill Icons

###### Feather Icons

###### Ico Icons

###### Fontawesome Icons

    <div class="card-body pulse-wrapper main-animate pulse-rabbet">
     <div class="grid grid-cols-12 card-gap">
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Stroke Icons</h6>
           <div class="common-flex">
             <a class="bg-light-primary" href="#!">
               <svg class="stroke-primary">
                 <use href="../assets/svg/icon-sprite.svg#stroke-calendar"></use>
               </svg>
             </a>
             <a class="bg-light-primary" href="#!">
               <svg class="stroke-primary">
                 <use href="../assets/svg/icon-sprite.svg#stroke-ui-kits"></use>
               </svg>
             </a>
             <a class="bg-light-primary" href="#!">
               <svg class="stroke-primary">
                 <use href="../assets/svg/icon-sprite.svg#stroke-bookmark"></use>
               </svg>
             </a>
             <a class="bg-light-primary" href="#!">
               <svg class="stroke-primary">
                 <use href="../assets/svg/icon-sprite.svg#stroke-to-do"></use>
               </svg>
             </a>
             <a class="bg-light-primary" href="#!">
               <svg class="stroke-primary">
                 <use href="../assets/svg/icon-sprite.svg#stroke-table"></use>
               </svg>
             </a>
             <a class="bg-light-primary" href="#!">
               <svg class="stroke-primary">
                 <use href="../assets/svg/icon-sprite.svg#stroke-animation"></use>
               </svg>
             </a>
           </div>
         </div>
       </div>
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Fill Icons</h6>
           <div class="common-flex">
             <a class="bg-light-secondary" href="#!">
               <svg class="fill-secondary">
                 <use href="../assets/svg/icon-sprite.svg#fill-calender"></use>
               </svg>
             </a>
             <a class="bg-light-secondary" href="#!">
               <svg class="fill-secondary">
                 <use href="../assets/svg/icon-sprite.svg#fill-ui-kits"></use>
               </svg>
             </a>
             <a class="bg-light-secondary" href="#!">
               <svg class="fill-secondary">
                 <use href="../assets/svg/icon-sprite.svg#fill-bookmark"></use>
               </svg>
             </a>
             <a class="bg-light-secondary" href="#!">
               <svg class="fill-secondary">
                 <use href="../assets/svg/icon-sprite.svg#fill-to-do"></use>
               </svg>
             </a>
             <a class="bg-light-secondary" href="#!">
               <svg class="fill-secondary">
                 <use href="../assets/svg/icon-sprite.svg#fill-table"></use>
               </svg>
             </a>
             <a class="bg-light-secondary" href="#!">
               <svg class="fill-secondary">
                 <use href="../assets/svg/icon-sprite.svg#fill-animation"></use>
               </svg>
             </a>
           </div>
         </div>
       </div>
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Feather Icons</h6>
           <div class="common-flex">
             <a class="bg-light-success" href="#!">
               <i class="stroke-success" data-feather="gitlab"></i>
             </a>
             <a class="bg-light-success" href="#!">
               <i class="stroke-success" data-feather="twitter"></i>
             </a>
             <a class="bg-light-success" href="#!">
               <i class="stroke-success" data-feather="youtube"></i>
             </a>
             <a class="bg-light-success" href="#!">
               <i class="stroke-success" data-feather="thumbs-up"></i>
             </a>
             <a class="bg-light-success" href="#!">
               <i class="stroke-success" data-feather="instagram"></i>
             </a>
             <a class="bg-light-success" href="#!">
               <i class="stroke-success" data-feather="github"></i>
             </a>
           </div>
         </div>
       </div>
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Ico Icons</h6>
           <div class="common-flex">
             <a class="bg-light-warning" href="#!">
               <i class="txt-warning icofont icofont-hotel-boy-alt"></i>
             </a>
             <a class="bg-light-warning" href="#!">
               <i class="txt-warning icofont icofont-boy"></i>
             </a>
             <a class="bg-light-warning" href="#!">
               <i class="txt-warning icofont icofont-girl"></i>
             </a>
             <a class="bg-light-warning" href="#!">
               <i class="txt-warning icofont icofont-business-man"></i>
             </a>
             <a class="bg-light-warning" href="#!">
               <i class="txt-warning icofont icofont-man-in-glasses"></i>
             </a>
             <a class="bg-light-warning" href="#!">
               <i class="txt-warning icofont icofont-business-man-alt-1"></i>
             </a>
           </div>
         </div>
       </div>
       <div class="col-span-4 xxl:col-span-6 md:col-span-12">
         <div class="card-wrapper border rounded-3">
           <h6 class="sub-title fw-bold">Fontawesome Icons</h6>
           <div class="common-flex">
             <a class="bg-light-info" href="#!">
                <i class="fa-regular fa-sun txt-info"></i>
             </a>
             <a class="bg-light-info" href="#!">
                <i class="fa-brands fa-linux txt-info"></i>
             </a>
             <a class="bg-light-info" href="#!">
                <i class="fa-brands fa-stack-overflow txt-info"></i>
             </a>
             <a class="bg-light-info" href="#!">
                <i class="fa-brands fa-windows txt-info"></i>
             </a>
             <a class="bg-light-info" href="#!">
                <i class="fa-brands fa-reddit-alien txt-info"></i>
             </a>
             <a class="bg-light-info" href="#!">
                <i class="fa-brands fa-dropbox txt-info"></i>
             </a>
           </div>
         </div>
       </div>
     </div>
    </div>

##### Heart-beat Animations

You can use the `main-animate` and `heartbeat-wrapper` classes for the colored SVG pulse animation.

    <div class="card-body heartbeat-wrapper main-animate">
     <div class="common-flex">
       <a href="#!">
         <i class="icon-heart-broken"></i>
       </a>
       <a href="#!">
         <i data-feather="heart"></i>
       </a>
       <a href="#!">
         <i class="fa fa-heart"></i>
       </a>
       <a href="#!">
         <i class="icofont icofont-heart-beat"></i>
       </a>
       <a href="#!">
         <i class="icon-heart"></i>
       </a>
     </div>
    </div>