Scaling svg to fit circle

I’m making a vue.js app which uses tons of different icons, so I decided to make a small icons builder in node.js to standardize their use, and it also “crops” each svg so it fits its parent (using the viewbox attribute).

Though I stumbled upon an issue, scaling icons to fit a square makes more “squary” look larger than round ones, so I’d like to programatically scale them in a circle :

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
}

.title {
  font-family: sans-serif;
  font-weight: 600;
  font-size: 24px;
  margin: 0;
}

.grid {
  display: flex;
  gap: 1.5rem;
}

.group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.bg {
  width: 80px;
  height: 80px;
  background-color: lightgray;
}

.zone {
  border: 2px solid red;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.zone--wanted {
    border-radius: 50%;
  }

.icon {
  width: 100%;
  height: 100%;
  background-color: coral;
}

.icon--rounded {
  border-radius: 20%;
}
  
.icon--circle {
  border-radius: 50%;
}
  
.icon-scaled--rounded {
  width: 80%;
  height: 80%;
}

.icon-scaled--square {
  width: 70.71068%;
  height: 70.71068%;
}
<div class="container">
  <p class="title">What I have :</p>
  <div class="grid">
    <div class="bg">
      <div class="zone">
        <div class="icon"></div>
      </div>
    </div>
    <div class="bg">
      <div class="zone">
        <div class="icon icon--rounded"></div>
      </div>
    </div>
    <div class="bg">
      <div class="zone">
        <div class="icon icon--circle"></div>
      </div>
    </div>
  </div>
  <p class="title">What I want :</p>
  <div class="grid">
    <div class="bg">
      <div class="zone zone--wanted">
        <div class="icon icon-scaled--square"></div>
      </div>
    </div>
    <div class="bg">
      <div class="zone zone--wanted">
        <div class="icon icon--rounded icon-scaled--rounded"></div>
      </div>
    </div>
    <div class="bg">
      <div class="zone zone--wanted">
        <div class="icon icon--circle"></div>
      </div>
    </div>
  </div>
</div>

Do you guys have an idea on how to do this ?