Badge With Icon

                    <section class="flex flex-wrap items-center justify-center p-8 gap-2">
  <div class="badge badge-info">
    <svg class="w-4 h-4 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10"></circle>
      <line x1="12" y1="16" x2="12" y2="12"></line>
      <line x1="12" y1="8" x2="12.01" y2="8"></line>
    </svg>
    Info
  </div>
  
  <div class="badge badge-success">
    <svg class="w-4 h-4 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
      <polyline points="22 4 12 14.01 9 11.01"></polyline>
    </svg>
    Success
  </div>
  
  <div class="badge badge-warning">
    <svg class="w-4 h-4 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10"></circle>
      <line x1="12" y1="8" x2="12" y2="12"></line>
      <line x1="12" y1="16" x2="12.01" y2="16"></line>
    </svg>
    Warning
  </div>
  
  <div class="badge badge-error">
    <svg class="w-4 h-4 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10"></circle>
      <line x1="15" y1="9" x2="9" y2="15"></line>
      <line x1="9" y1="9" x2="15" y2="15"></line>
    </svg>
    Error
  </div>
</section>

<style>
  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition-property: color, background-color, border-color;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    height: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    width: fit-content;
    padding-left: 0.563rem;
    padding-right: 0.563rem;
    border-radius: 0.375rem;
    background-color: #e5e7eb;
    color: #374151;
  }
  
  /* Badge colors */
  .badge-info {
    background-color: #3abff8;
    color: white;
  }
  
  .badge-success {
    background-color: #36d399;
    color: white;
  }
  
  .badge-warning {
    background-color: #fbbd23;
    color: white;
  }
  
  .badge-error {
    background-color: #f87272;
    color: white;
  }
</style>