Signal icon

24:T77c4, Signal icon
always
hover
still
zero
low
medium
high
full
25:T47c56,
<!doctype html>
<!-- GENERATED by scripts/registry/gen-icons.ts from content/icons/signal.json -->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Signal icon</title>
    <style>
      body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #0b0d10; color: #f2f4f7; font: 14px/1.4 system-ui, sans-serif; }
      .row { display: flex; align-items: center; gap: 28px; }
      .stack { display: grid; gap: 28px; justify-items: center; }
      figure { margin: 0; display: grid; gap: 8px; justify-items: center; }
      figcaption { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #7c8594; }
      button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; border: 1px solid rgb(255 255 255 / 0.15); background: rgb(255 255 255 / 0.06); color: #fff; font: inherit; cursor: pointer; }
      .fbi { display: inline-block; vertical-align: middle; overflow: visible; --d: 1200ms; }
      .fbi .fbi-layer { animation-play-state: paused; transform-box: view-box; --delay-ms: calc(var(--delay, 0) * var(--d)); }
      .fbi[data-animate="always"] .fbi-layer, .fbi[data-animate="hover"]:hover .fbi-layer, .fbi[data-animate="hover"]:focus-visible .fbi-layer, .fbi-hot .fbi[data-animate="hover"] .fbi-layer { animation-play-state: running; }
      .fbi[data-animate="none"] .fbi-layer { animation: none; }
      .fbi .fbi-layer[data-variant] { display: none; }
      .fbi[data-variant="zero"] .fbi-layer[data-variant="zero"] { display: inline; }
      .fbi[data-variant="low"] .fbi-layer[data-variant="low"] { display: inline; }
      .fbi[data-variant="medium"] .fbi-layer[data-variant="medium"] { display: inline; }
      .fbi[data-variant="high"] .fbi-layer[data-variant="high"] { display: inline; }
      .fbi[data-variant="full"] .fbi-layer[data-variant="full"] { display: inline; }
      .fbi .fbi-blink { animation-name: fbi-blink; animation-duration: var(--d); animation-delay: var(--delay-ms); animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
      @media (prefers-reduced-motion: reduce) { .fbi .fbi-layer { animation: none !important; } }
      
      @keyframes fbi-spin { to { transform: rotate(360deg); } }
      @keyframes fbi-draw { 0% { stroke-dashoffset: 1; opacity: 0.2; } 55% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
      @keyframes fbi-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-2.2px); } }
      @keyframes fbi-wiggle { 0%, 70%, 100% { transform: rotate(0); } 17% { transform: rotate(-9deg); } 35% { transform: rotate(9deg); } 52% { transform: rotate(-5deg); } }
      @keyframes fbi-pulse { 0%, 70%, 100% { transform: scale(1); } 35% { transform: scale(1.14); } }
      @keyframes fbi-swing { 0%, 80%, 100% { transform: rotate(0); } 16% { transform: rotate(13deg); } 32% { transform: rotate(-10deg); } 48% { transform: rotate(6deg); } 64% { transform: rotate(-3deg); } }
      @keyframes fbi-slide-x { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(2.4px); } }
      @keyframes fbi-slide-y { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(2.4px); } }
      @keyframes fbi-ring { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
      @keyframes fbi-blink { 0%, 60%, 100% { opacity: 1; } 30% { opacity: 0.15; } }
      @keyframes fbi-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
      
    </style>
  </head>
  <body>
    <div class="stack">
      <div class="row">
        <figure><figcaption>always</figcaption><svg class="fbi" data-animate="always" data-variant="full" viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="#F5C542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V10" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V10" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V6.8" />
      </svg></figure>
        <figure><figcaption>hover</figcaption><svg class="fbi" data-animate="hover" data-variant="full" viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="#38BDF8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V10" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V10" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V6.8" />
      </svg></figure>
        <figure><figcaption>still</figcaption><svg class="fbi" data-animate="none" data-variant="full" viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="#9BE15D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V10" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V10" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V6.8" />
      </svg></figure>
      </div>
      <div class="row">
      <figure><figcaption>zero</figcaption><svg class="fbi" data-animate="always" data-variant="zero" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#F5C542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V10" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V10" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V6.8" />
      </svg></figure>
      <figure><figcaption>low</figcaption><svg class="fbi" data-animate="always" data-variant="low" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#F5C542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V10" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V10" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V6.8" />
      </svg></figure>
      <figure><figcaption>medium</figcaption><svg class="fbi" data-animate="always" data-variant="medium" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#F5C542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V10" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V10" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V6.8" />
      </svg></figure>
      <figure><figcaption>high</figcaption><svg class="fbi" data-animate="always" data-variant="high" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#F5C542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V10" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V10" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V6.8" />
      </svg></figure>
      <figure><figcaption>full</figcaption><svg class="fbi" data-animate="always" data-variant="full" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#F5C542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V10" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V10" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V6.8" />
      </svg></figure>
      </div>
      <button type="button" class="fbi-hot-target"><svg class="fbi" data-animate="hover" data-variant="full" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#F5C542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="zero" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="low" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V18" />
        <path data-variant="medium" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V10" />
        <path data-variant="high" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V18" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.00; transform-origin: 12px 12px" d="M5.2 20V16.4" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.15; transform-origin: 12px 12px" d="M9.8 20V13.2" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.30; transform-origin: 12px 12px" d="M14.4 20V10" />
        <path data-variant="full" class="fbi-layer fbi-blink" style="--delay: 0.45; transform-origin: 12px 12px" d="M19 20V6.8" />
      </svg> Signal</button>
    </div>
    <script>
      // A parent (the button) that should drive the icon's hover state gets the .fbi-hot class while hovered.
      document.querySelectorAll(".fbi-hot-target").forEach(function (el) {
        el.addEventListener("pointerenter", function () { el.classList.add("fbi-hot"); });
        el.addEventListener("pointerleave", function () { el.classList.remove("fbi-hot"); });
        el.addEventListener("focus", function () { el.classList.add("fbi-hot"); });
        el.addEventListener("blur", function () { el.classList.remove("fbi-hot"); });
      });
    </script>
  </body>
</html>
Nearby
