Chip With Icon

<div class="nuda-chip-icon">
  <span class="nuda-chip-icon__chip">
    <svg viewBox="0 0 14 14" width="12" height="12" aria-hidden="true">
      <path d="M7 1l1.8 4 4.2.6-3 3 .7 4.2L7 11l-3.7 1.8L4 8.6 1 5.6l4.2-.6L7 1z"
            fill="currentColor"/>
    </svg>
    Featured
  </span>
  <span class="nuda-chip-icon__chip">
    <svg viewBox="0 0 14 14" width="12" height="12" aria-hidden="true">
      <circle cx="7" cy="7" r="5" fill="none" stroke="currentColor" stroke-width="1.4"/>
      <path d="M7 4v3l2 1.5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
    </svg>
    12 min
  </span>
</div>

/* Chip With Icon
   Leading SVG icon + label.
   Customize: --chip-icon-color */

.nuda-chip-icon {
  --chip-icon-color: #e4ff54;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nuda-chip-icon__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  font: 500 12px/1 ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  background: #111114;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  transition: transform 0.15s, border-color 0.2s;
}

.nuda-chip-icon__chip:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.16);
}

.nuda-chip-icon__chip svg {
  color: var(--chip-icon-color);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-chip-icon__chip { transition: none; }
  .nuda-chip-icon__chip:hover { transform: none; }
}