Social icons

Colored Social Icons

<!-- Social button -->
<a href="#!" class="d-block width-3x height-3x my-2 me-3 hover-lift hover-shadow rounded-circle">
 <img src="assets/img/brands/Messenger.svg" alt="" class="rounded-circle w-100 h-auto">
</a>


Sizing

Hover colored social icons

<!-- Social button -->
<a href="#!" class="d-inline-block mb-1 ms-1 si rounded-pill si-border si-hover-facebook">
  <i class="bx bxl-facebook fs-5"></i>
  <i class="bx bxl-facebook fs-5"></i>
</a>


Colored social icons

<!-- Social button -->
<a href="#!" class="d-inline-block mb-1 ms-1 si rounded-pill si-border si-colored-facebook">
  <i class="bx bxl-facebook fs-5"></i>
  <i class="bx bxl-facebook fs-5"></i>
</a>


Social icon + text

<!-- Social button -->
<a href="#!" class="btn mb-3 position-relative si-hover-facebook border flex-center">
 <div class="position-relative d-flex align-items-center">
  <i class="bx bxl-facebook fs-5 me-2"></i>
  <span>signup with facebook</span>
 </div>
</a>


Social icons grid

Accelerate your web project.

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.