通知バッジ付きアイコンナビ

<nav class="d03-13-08-nav">
          <a href="#" onclick="return false" class="d03-13-08-icon" aria-label="ホーム">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12l8-8 8 8M6 10v10h12V10"/></svg>
          </a>
          <a href="#" onclick="return false" class="d03-13-08-icon" aria-label="メッセージ">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 5h16v11H8l-4 4V5z"/></svg>
            <span class="d03-13-08-badge">3</span>
          </a>
          <a href="#" onclick="return false" class="d03-13-08-icon" aria-label="通知">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9a6 6 0 0112 0c0 5 2 6 2 6H4s2-1 2-6z"/><path d="M10 20a2 2 0 004 0"/></svg>
            <span class="d03-13-08-badge d03-13-08-dot"></span>
          </a>
          <a href="#" onclick="return false" class="d03-13-08-icon" aria-label="カート">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="20" r="1.4"/><circle cx="17" cy="20" r="1.4"/><path d="M3 4h2l2.4 11h9.2L19 8H6"/></svg>
            <span class="d03-13-08-badge">12</span>
          </a>
        </nav>

.d03-13-08-nav{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
        .d03-13-08-icon{
          position:relative;
          display:flex;align-items:center;justify-content:center;
          width:40px;height:40px;
          color:#334155;text-decoration:none;
        }
        .d03-13-08-badge{
          position:absolute;top:-2px;right:-4px;
          min-width:16px;height:16px;padding:0 4px;
          border-radius:99px;background:#ef4444;color:#fff;
          font-size:10px;font-weight:700;line-height:16px;text-align:center;
        }
        .d03-13-08-dot{
          min-width:9px;width:9px;height:9px;padding:0;top:1px;right:2px;
        }