Veja como criar boxes com ícones utilizando bootstrap e ícones.

Os ícones utilizados são do pacote de fontes disponível no site do bootstrap

Estes ícones podem sofrer variações de cor de fundo, cores e tamanhos.

Para este tutorial é necessario prepara o ambiente instalando ou baixando as dependencias (bootstrap e ícones) conforme  orientações da página https://getbootstrap.com/docs/5.1/getting-started/introduction/

 

Código gerado no exemplo.

<style>
 .bigIcon {
 font-size: 5em;
 }
 </style>

 <div class="container-full mt-3">
 <div class="row g-3 mx-0">

 <div class="col-6 col-md-4 col-lg-4">
 <div class=" bg-light rounded-3 shadow h-100 px-1">
 <i class="float-end bi bi-star-fill text-info"></i>
 <span class="d-block text-center"><i class="bigIcon bi bi-person-hearts"></i></span>
 <span class="d-block text-center p-2 text-info">Teste com ícone de pessoa...</span>
 </div>
 </div>

 <div class="col-6 col-md-4 col-lg-4">
 <div class="rounded-3 shadow h-100 px-1">
 <i class="float-end bi bi-star-fill text-secondary"></i>
 <span class="d-block text-center"><i class="bigIcon bi bi-server"></i></span>
 <span class="d-block text-center p-2 text-secondary">database info ...</span>
 </div>
 </div>

 <div class="col-6 col-md-4 col-lg-4">
 <div class="rounded-3 shadow h-100 px-1">
 <i class="float-end bi bi-star-fill text-success"></i>
 <span class="d-block text-center"><i class="bigIcon bi bi-star"></i></span>
 <span class="d-block text-center p-2 text-success">star info ...</span>
 </div>
 </div>

 <div class="col-6 col-md-4 col-lg-4">
 <div class="rounded-3 shadow h-100 px-1">
 <i class="float-end bi bi-star-fill text-success"></i>
 <span class="d-block text-center"><i class="bigIcon bi bi-2-circle-fill"></i></span>
 <span class="d-block text-center p-2 text-success">message info ...</span>
 </div>
 </div>

 <div class="col-6 col-md-4 col-lg-4">
 <div class="rounded-3 shadow h-100 px-1">
 <i class="float-end bi bi-star-fill text-danger"></i>
 <span class="d-block text-center"><i class="bigIcon bi bi-box-seam-fill"></i></span>
 <span class="d-block text-center p-2 text-danger">box info ...</span>
 </div>
 </div>

 <div class="col-6 col-md-4 col-lg-4">
 <div class="rounded-3 shadow h-100 px-1">
 <i class="float-end bi bi-star-fill text-success"></i>
 <span class="d-block text-center"><i class="bigIcon bi bi-camera-fill"></i></span>
 <span class="d-block text-center p-2 text-success">camera info ...</span>
 </div>
 </div>

 </div>
 </div>