Prevent border-radius from clipping SVG icon in CSS

I'm trying to add an SVG icon with grey background in a round shape. But the problem is that applying border-radius to make it round is clipping the bottom left portion of the SVG logo. I've played around with padding but it doesn't allow me to set a perfect circle without compromising the border-radius.You can see a small clipping at bottom left corner in this image:

.tik-tok-icon {
    fill: hsla(0, 0%, 50%, 1);
    padding: 5px 7px;
    background: hsla(0, 0%, 20%, 1);
    border-radius: 20px;
}

It needs atleast 20px border-radius to get a circle shape. In this image I have removed the border-radius and the SVG doesn't get clipped.

I need to get a round background without the clipping occurring.

.tik-tok-icon {
    fill: hsla(0, 0%, 50%, 1);
    padding: 5px 7px;
    background: hsla(0, 0%, 20%, 1);
    border-radius: 40px;
   padding: 10px 13px;
}

.icon {
  height: 70px;
  width: 70px;

}

<html>
<body>
<div class="icon">
  <svg class="tik-tok-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fab" data-icon="tiktok" class="1 _icon_1ijny5" viewBox="0 0 448 512"><path d="M448 209.91a210.06 210.06 0 01-122.77-39.25v178.72A162.55 162.55 0 11185 188.31v89.89a74.62 74.62 0 1052.23 71.18V0h88a121.18 121.18 0 001.86 22.17A122.18 122.18 0 00381 102.39a121.43 121.43 0 0067 20.14z"></path></svg>
</div>

</body>
</html>

Solution

It's the containing icon element that you want to be circular and with that background color, and possibly with some padding.

There are various ways of positioning the svg. This snippet uses flex to center it in the icon element. It uses 50% as the border radius of the icon element to ensure a circle (whatever size and padding you decide to have on the icon element).

.tik-tok-icon {
  fill: hsla(0, 0%, 50%, 1);
  width: 80%;
}

.icon {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsla(0, 0%, 20%, 1);
  padding: 10px;
}

<html>

<body>
  <div class="icon">
    <svg class="tik-tok-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fab" data-icon="tiktok" class="1 _icon_1ijny5" viewBox="0 0 448 512"><path d="M448 209.91a210.06 210.06 0 01-122.77-39.25v178.72A162.55 162.55 0 11185 188.31v89.89a74.62 74.62 0 1052.23 71.18V0h88a121.18 121.18 0 001.86 22.17A122.18 122.18 0 00381 102.39a121.43 121.43 0 0067 20.14z"></path></svg>
  </div>

</body>

</html>