我没有完全匹配你的按钮，但足以给予你知道如何做到这一点。
我用白色的边框。然后勾勒出外部细线。

ul{list-style:none}
.nav-link{
  display:inline-block;
  background:red;
  padding:20px;
  border:10px #fff solid;
  border-radius:50%;
  outline:1px red solid;
  color:#fff;
}

<ul><li class="nav-item button">
                    <a class="nav-link" href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                        </svg>
                    </a>
                </li></ul>

您也可以使用阴影来绘制bg和外部红色圆圈，同时设置透明边框：
可能的示例：

.nav-link {
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  margin: 2.25em;
  aspect-ratio: 1;
  border: 10px transparent solid;
  border-radius: 50%;
  box-shadow: 0 0 1px 2px #FC7753, inset 0 0 0 50px #FC7753;
  vertical-align: top
}

.nav-link svg {
  scale: 3;
  /* ? to match your screenshot ? */
}

/* demo purpose */

html {
  display: grid;
  min-height: 100vh;
  background: #c5c2ab
}

body {
  background: yellow linear-gradient(to top left, transparent, #0008, transparent);
  margin: auto;
}

<a class="nav-link" href="#">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
  </svg>
  </a