Trust Badge

Icon signalling security, accreditation or guarantee.

html

<span class="badge badge--bordered" data-type="Secure checkout" style="--accent:#A8E6C1;">
  <span class="badge__icon" aria-hidden="true">
    <span data-icon="Secure checkout">&#128274;</span>
    <span data-icon="Money-back guarantee">&#8635;</span>
    <span data-icon="Accredited">&#9878;</span>
  </span>
  Secure checkout
</span>
<style>
.badge { display: inline-flex; align-items: center; gap: 8px; font: 600 13px system-ui, sans-serif; color: #241430; padding: 8px 14px; border-radius: 999px; background: #FAF7F2; }
.badge--bordered { border: 1.5px solid var(--accent); }
.badge__icon { color: var(--accent); font-size: 15px; display: inline-flex; }
.badge__icon span { display: none; }
.badge[data-type="Secure checkout"] .badge__icon span[data-icon="Secure checkout"],
.badge[data-type="Money-back guarantee"] .badge__icon span[data-icon="Money-back guarantee"],
.badge[data-type="Accredited"] .badge__icon span[data-icon="Accredited"] { display: inline; }
</style>

tailwind

<span class="badge-tw border-[1.5px] inline-flex items-center gap-2 font-sans font-semibold text-[13px] text-[#241430] px-3.5 py-2 rounded-full bg-[#FAF7F2]" data-type="Secure checkout" style="border-color:#A8E6C1;">
  <span class="badge-tw__icon inline-flex text-[15px]" style="color:#A8E6C1;" aria-hidden="true">
    <span data-icon="Secure checkout">&#128274;</span>
    <span data-icon="Money-back guarantee">&#8635;</span>
    <span data-icon="Accredited">&#9878;</span>
  </span>
  Secure checkout
</span>
<style>
.badge-tw__icon span { display: none; }
[data-type="Secure checkout"] .badge-tw__icon span[data-icon="Secure checkout"],
[data-type="Money-back guarantee"] .badge-tw__icon span[data-icon="Money-back guarantee"],
[data-type="Accredited"] .badge-tw__icon span[data-icon="Accredited"] { display: inline; }
</style>

react

export function TrustBadge({
  type = "Secure checkout",
  accent = "#A8E6C1",
  showBorder = true,
}) {
  const icon = { "Secure checkout": "\ud83d\udd12", "Money-back guarantee": "\u21bb", "Accredited": "\u2696\ufe0f" }[type] ?? "\ud83d\udd12";
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 8, font: "600 13px system-ui, sans-serif",
      color: "#241430", padding: "8px 14px", borderRadius: 999, background: "#FAF7F2",
      border: showBorder ? `1.5px solid ${accent}` : "none" }}>
      <span aria-hidden="true" style={{ color: accent, fontSize: 15 }}>{icon}</span>
      {type}
    </span>
  );
}