Breadcrumb With Icon

<nav aria-label="Breadcrumb" class="ws-breadcrumb py-3">
  <ol class="flex items-center gap-1 text-sm text-[var(--ws-breadcrumb-text)]">
    <li>
      <a href="#" class="flex items-center gap-1 transition hover:text-[var(--ws-breadcrumb-active)]">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>
        </svg>
        <span>Home</span>
      </a>
    </li>
    <li>
      <svg class="h-4 w-4 text-[var(--ws-breadcrumb-separator)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
      </svg>
    </li>
    <li>
      <a href="#" class="transition hover:text-[var(--ws-breadcrumb-active)]">Products</a>
    </li>
    <li>
      <svg class="h-4 w-4 text-[var(--ws-breadcrumb-separator)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
      </svg>
    </li>
    <li>
      <a href="#" class="transition hover:text-[var(--ws-breadcrumb-active)]">Electronics</a>
    </li>
    <li>
      <svg class="h-4 w-4 text-[var(--ws-breadcrumb-separator)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
      </svg>
    </li>
    <li>
      <span class="font-medium text-[var(--ws-breadcrumb-active)]" aria-current="page">Headphones</span>
    </li>
  </ol>
</nav>