Icon box






<div class="square-box-xl bg-color-blue icon-2xl">
  <i class="fas fa-check text-white"></i>
</div>
<div class="square-box-lg bg-color-turquiose icon-xl">
  <i class="fas fa-check text-white"></i>
</div>
<div class="square-box-md bg-color-purple icon-lg">
  <i class="fas fa-check text-white"></i>
</div>
<div class="square-box-sm bg-color-pink-edge">
  <i class="fas fa-check text-white"></i>
</div>
<div class="square-box-xs bg-color-very-peri">
  <i class="fas fa-check text-white"></i>
</div>







<div class="circle-box-xl bg-color-blue icon-2xl">
  <i class="fas fa-check text-white"></i>
</div>
<div class="circle-box-lg bg-color-turquiose icon-xl">
  <i class="fas fa-check text-white"></i>
</div>
<div class="circle-box-md bg-color-purple icon-lg">
  <i class="fas fa-check text-white"></i>
</div>
<div class="circle-box-sm bg-color-pink-edge">
  <i class="fas fa-check text-white"></i>
</div>
<div class="circle-box-xs bg-color-very-peri">
  <i class="fas fa-check text-white"></i>
</div>

A


B


C


D

E

<div class="square-box-xl bg-color-blue">
  <h2>A</h2>
</div>
<div class="square-box-lg bg-color-turquiose">
  <h3>B</h3>
</div>
<div class="square-box-md bg-color-purple">
  <h4>C</h4>
</div>
<div class="square-box-sm bg-color-pink-edge">
  <h5>D</h5>
</div>
<div class="square-box-xs bg-color-very-peri">
  <h6>E</h6>
</div>

1


2


3


4

5

<div class="circle-box-xl bg-color-blue">
  <h2>1</h2>
</div>
<div class="circle-box-lg bg-color-turquiose">
  <h3>2</h3>
</div>
<div class="circle-box-md bg-color-purple">
  <h4>3</h4>
</div>
<div class="circle-box-sm bg-color-pink-edge">
  <h5>4</h5>
</div>
<div class="circle-box-xs bg-color-very-peri">
  <h6>5</h6>
</div>