Los iconos de Bootstrap son SVG, por lo que se escalan rápida y fácilmente y se les puede aplicar estilo con CSS. Planteamiento: Podemos colocar los iconos SVG y darles forma de círculo. Esto hará que los íconos SVG parezcan tener una forma circular. Esto se puede lograr usando una clase de Bootstrap llamada «círculo redondeado»
Sintaxis:
<img class = "rounded-circle" src = "..." alt = "image">
Ejemplo: intentemos colocar tres íconos SVG en un círculo que aparece en la misma línea (uno al lado del otro según sea necesario).
Para asegurarnos de que todos los íconos aparezcan uno al lado del otro, debemos incluir float: left; dentro de la etiqueta CSS para <img>.
Además (opcionalmente), también agregamos la clase Bootstrap «shadow-lg», para obtener una sombra debajo de cada ícono SVG para que se vea bien.
Ejemplo: coloque esta etiqueta <img> dentro de una etiqueta <div> como se muestra a continuación:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport"
content="width=device-width"/>
<title>JS Bin</title>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"/>
<style>
img {
width: 100px;
height: 100px;
margin-top: 50px;
float: left;
margin-left: 10px;
}
</style>
</head>
<body>
<div><img class="shadow-lg rounded-circle" src=
"https://img.icons8.com/emoji/2x/smiling-face.png"
alt="image1" />
</div>
<div><img class="shadow-lg rounded-circle" src=
"https://img.icons8.com/emoji/2x/slightly-smiling-face.png"
alt="image2"/>
</div>
<div><img class="shadow-lg rounded-circle" src=
"https://img.icons8.com/emoji/2x/smiling-face-with-smiling-eyes.png"
alt="image3"/>
</div>
</body>
</html>
Salida: 
Referencias: