Image with solid color rounded background - html

Question

I want to display images inside a container that has a colored background.
I want the background of the container is rounded, and the image is placed at the center.
Also, there is space between the border of the background and the image.
This is the goal:
img
The code so far:
.circle{
border-radius: 50%;
background: #2e374f;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 50px;
display: table-cell;
vertical-align: middle;
}
.title{
color: #ffffff;
font-size: 10px;
text-align: center;
margin-top: 5px;
opacity: 0.5;
}
<div class="circle">
<img src="https://www.fillmurray.com/50/50" class="mx-auto d-block">
<div class="title">
TITLE
</div>
</div>
this is what I achieved so far:
img

Answer 1

you need to remove display: table-cell rule and additionaly you can shrink the image.
.circle{
border-radius: 50%;
background: #2e374f;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 150px;
width: 150px;
}
.title{
color: #ffffff;
font-size: 10px;
text-align: center;
margin-top: 5px;
opacity: 0.5;
}
.img {
max-width: 50%;
max-height: 50%;
}
<div class="circle">
<img src="https://picsum.photos/100/100?grayscale" class="mx-auto d-block img">
<div class="title">
TITLE
</div>
</div>

Answer 2

Please check.
.container-box {
width: 400px;
height: 400px;
background-color: black;
}
.container-circle {
display:inline-block;
margin: 50px;
width: 300px;
height: 300px;
border-radius: 150px;
background-color: gray;
}
.image {
background: url(https://upload.wikimedia.org/wikipedia/commons/c/ce/Font_Awesome_5_solid_arrow-circle-right.svg);
width: 100px;
height: 100px;
display: inline-block;
margin: 100px;
}
<div class="container-box">
<div class="container-circle">
<div class="image">
</div>
</div>
</div>
`

Answer 3

If I see correctly you want the image to be round and not the container. In this case this should help you out:
.circle img {
border-radius: 50%;
max-width: 100%;
}
.circle{
background: #2e374f;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
height:100px;
width: 100px;
}
.title{
color: #ffffff;
font-size: 10px;
text-align: center;
margin-top: 5px;
opacity: 0.5;
}
<div class="circle">
<img src="https://www.fillmurray.com/50/50" class="mx-auto d-block">
<div class="title">
TITLE
</div>
</div>