Count Badge

<div class="nuda-cntbadge">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M22 12h-6l-2 3h-4l-2-3H2" />
    <path d="M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11z" />
  </svg>
  <span class="nuda-cntbadge__count">12</span>
</div>

.nuda-cntbadge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #a0a0a8;
}

.nuda-cntbadge svg {
  width: 20px;
  height: 20px;
}

.nuda-cntbadge__count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ff5e7a;
  color: #fafafa;
  border-radius: 99px;
  border: 2px solid #09090b;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  animation: _cntPop .5s cubic-bezier(.34,1.56,.64,1);
}

@keyframes _cntPop {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cntbadge__count {
    animation: none;
  }
}