<div class="icons">

  <div class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-save icon-svg">
      <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
      <polyline points="17 21 17 13 7 13 7 21"></polyline>
      <polyline points="7 3 7 8 15 8"></polyline>
    </svg>
    <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="squircle">
      <path d="M 0, 100 C 0, 12 12, 0 100, 0 S 200, 12 200, 100 188, 200 100, 200 0, 188 0, 100" fill="var(--bg)"></path>
    </svg>
  </div>

  <div class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-code icon-svg">
      <polyline points="16 18 22 12 16 6"></polyline>
      <polyline points="8 6 2 12 8 18"></polyline>
    </svg>
    <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="squircle">
      <path d="M 0, 100 C 0, 12 12, 0 100, 0 S 200, 12 200, 100 188, 200 100, 200 0, 188 0, 100" fill="var(--bg)"></path>
    </svg>
  </div>

  <div class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-coffee icon-svg">
      <path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
      <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
      <line x1="6" y1="1" x2="6" y2="4"></line>
      <line x1="10" y1="1" x2="10" y2="4"></line>
      <line x1="14" y1="1" x2="14" y2="4"></line>
    </svg>
    <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="squircle">
      <path d="M 0, 100 C 0, 12 12, 0 100, 0 S 200, 12 200, 100 188, 200 100, 200 0, 188 0, 100" fill="var(--bg)"></path>
    </svg>
  </div>
  <div class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart icon-svg">
      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
    </svg>
    <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="squircle">
      <path d="M 0, 100 C 0, 12 12, 0 100, 0 S 200, 12 200, 100 188, 200 100, 200 0, 188 0, 100" fill="var(--bg)"></path>
    </svg>
  </div>
</div>
</div>

<button>Turn Squircles Off</button>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
  background: #f5f7fa;
}

.icons {
  display: flex;
}

.icon {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin: 0 8px;
  cursor: pointer;
  transition: transform 200ms ease;
}

.icon:hover {
  transform: scale(1.125);
}

.icon .icon-svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
}

.icon .squircle {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.icon:nth-of-type(1) {
  color: #620042;
  --bg: #ffb8d2;
}

.icon:nth-of-type(2) {
  color: #44056e;
  --bg: #dac4ff;
}

.icon:nth-of-type(3) {
  color: #003e6b;
  --bg: #b6e0fe;
}

.icon:nth-of-type(4) {
  color: #014807;
  --bg: #c1f2c7;
}

button {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 156px;
  padding: 0.5rem 1rem;
  font-family: system-ui, sans-serif;
  border: none;
  background: #102a43;
  color: #f0f4f8;
  -webkit-font-smoothing: antialiased;
  -mox-osx-font-smoothing: grayscale;
  border-radius: 16px;
  font-weight: 500;
  cursor: pointer;
}

.no-squircle .squircle {
  opacity: 0;
}

.no-squircle .icon {
  background-color: var(--bg);
  border-radius: 16px;
}

document.querySelector("button").addEventListener("click", (e) => {
  if (document.body.classList.contains("no-squircle")) {
    document.body.classList.remove("no-squircle");
    e.target.innerHTML = "Turn Squircles Off";
  } else {
    document.body.classList.add("no-squircle");
    e.target.innerHTML = "Turn Squircles On";
  }
});