Skip to main content

Icon box






<div class="square-box-xl bg-black-08 icon-2xl">
  <i class="fas fa-check text-white"></i>
</div>
<div class="square-box-lg bg-black-08 icon-xl">
  <i class="fas fa-check text-white"></i>
</div>
<div class="square-box-md bg-black-08 icon-lg">
  <i class="fas fa-check text-white"></i>
</div>
<div class="square-box-sm bg-black-08">
  <i class="fas fa-check text-white"></i>
</div>
<div class="square-box-xs bg-black-08 icon-sm">
  <i class="fas fa-check text-white"></i>
</div>






<div class="circle-box-xl bg-black-08 icon-2xl">
  <i class="fas fa-check text-white"></i>
</div>
<div class="circle-box-lg bg-black-08 icon-xl">
  <i class="fas fa-check text-white"></i>
</div>
<div class="circle-box-md bg-black-08 icon-lg">
  <i class="fas fa-check text-white"></i>
</div>
<div class="circle-box-sm bg-black-08">
  <i class="fas fa-check text-white"></i>
</div>
<div class="circle-box-xs bg-black-08 icon-sm">
  <i class="fas fa-check text-white"></i>
</div>

A


B


C


D

E

<div class="square-box-xl bg-black-08">
  <h2>A</h2>
</div>
<div class="square-box-lg bg-black-08">
  <h3>B</h3>
</div>
<div class="square-box-md bg-black-08">
  <h4>C</h4>
</div>
<div class="square-box-sm bg-black-08">
  <h5>D</h5>
</div>
<div class="square-box-xs bg-black-08">
  <h6>E</h6>
</div>

1


2


3


4

5

<div class="circle-box-xl bg-black-08">
  <h2>1</h2>
</div>
<div class="circle-box-lg bg-black-08">
  <h3>2</h3>
</div>
<div class="circle-box-md bg-black-08">
  <h4>3</h4>
</div>
<div class="circle-box-sm bg-black-08">
  <h5>4</h5>
</div>
<div class="circle-box-xs bg-black-08">
  <h6>5</h6>
</div>