Image with solid color rounded background

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