Arrow icon

24:T515f, Arrow icon
always
hover
still
down
left
right
up-down
left-right
25:T2f767,
<!doctype html>
<!-- GENERATED by scripts/registry/gen-icons.ts from content/icons/arrow.json -->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Arrow 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: 1100ms; }
      .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="up"] .fbi-layer[data-variant="up"] { display: inline; }
      .fbi[data-variant="down"] .fbi-layer[data-variant="down"] { display: inline; }
      .fbi[data-variant="left"] .fbi-layer[data-variant="left"] { display: inline; }
      .fbi[data-variant="right"] .fbi-layer[data-variant="right"] { display: inline; }
      .fbi[data-variant="up-down"] .fbi-layer[data-variant="up-down"] { display: inline; }
      .fbi[data-variant="left-right"] .fbi-layer[data-variant="left-right"] { display: inline; }
      .fbi .fbi-bounce { animation-name: fbi-bounce; animation-duration: var(--d); animation-delay: var(--delay-ms); animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
      .fbi .fbi-slide-y { animation-name: fbi-slide-y; animation-duration: var(--d); animation-delay: var(--delay-ms); animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
      .fbi .fbi-slide-x { animation-name: fbi-slide-x; 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="right" 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="up" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 19.5V4.5M7.6 8.9L12 4.5L16.4 8.9" />
        <path data-variant="down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 4.5V19.5M7.6 15.1L12 19.5L16.4 15.1" />
        <path data-variant="left" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M19.5 12H4.5M8.9 7.6L4.5 12L8.9 16.4" />
        <path data-variant="right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 12H19.5M15.1 7.6L19.5 12L15.1 16.4" />
        <path data-variant="up-down" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M8.5 19.5V4.5M5.1 7.9L8.5 4.5L11.9 7.9" />
        <path data-variant="up-down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M15.5 4.5V19.5M12.1 16.1L15.5 19.5L18.9 16.1" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.50; transform-origin: 12px 12px" d="M19.5 8.5H4.5M7.9 5.1L4.5 8.5L7.9 11.9" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 15.5H19.5M16.1 12.1L19.5 15.5L16.1 18.9" />
      </svg></figure>
        <figure><figcaption>hover</figcaption><svg class="fbi" data-animate="hover" data-variant="right" 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="up" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 19.5V4.5M7.6 8.9L12 4.5L16.4 8.9" />
        <path data-variant="down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 4.5V19.5M7.6 15.1L12 19.5L16.4 15.1" />
        <path data-variant="left" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M19.5 12H4.5M8.9 7.6L4.5 12L8.9 16.4" />
        <path data-variant="right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 12H19.5M15.1 7.6L19.5 12L15.1 16.4" />
        <path data-variant="up-down" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M8.5 19.5V4.5M5.1 7.9L8.5 4.5L11.9 7.9" />
        <path data-variant="up-down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M15.5 4.5V19.5M12.1 16.1L15.5 19.5L18.9 16.1" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.50; transform-origin: 12px 12px" d="M19.5 8.5H4.5M7.9 5.1L4.5 8.5L7.9 11.9" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 15.5H19.5M16.1 12.1L19.5 15.5L16.1 18.9" />
      </svg></figure>
        <figure><figcaption>still</figcaption><svg class="fbi" data-animate="none" data-variant="right" 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="up" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 19.5V4.5M7.6 8.9L12 4.5L16.4 8.9" />
        <path data-variant="down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 4.5V19.5M7.6 15.1L12 19.5L16.4 15.1" />
        <path data-variant="left" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M19.5 12H4.5M8.9 7.6L4.5 12L8.9 16.4" />
        <path data-variant="right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 12H19.5M15.1 7.6L19.5 12L15.1 16.4" />
        <path data-variant="up-down" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M8.5 19.5V4.5M5.1 7.9L8.5 4.5L11.9 7.9" />
        <path data-variant="up-down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M15.5 4.5V19.5M12.1 16.1L15.5 19.5L18.9 16.1" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.50; transform-origin: 12px 12px" d="M19.5 8.5H4.5M7.9 5.1L4.5 8.5L7.9 11.9" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 15.5H19.5M16.1 12.1L19.5 15.5L16.1 18.9" />
      </svg></figure>
      </div>
      <div class="row">
      <figure><figcaption>up</figcaption><svg class="fbi" data-animate="always" data-variant="up" 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="up" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 19.5V4.5M7.6 8.9L12 4.5L16.4 8.9" />
        <path data-variant="down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 4.5V19.5M7.6 15.1L12 19.5L16.4 15.1" />
        <path data-variant="left" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M19.5 12H4.5M8.9 7.6L4.5 12L8.9 16.4" />
        <path data-variant="right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 12H19.5M15.1 7.6L19.5 12L15.1 16.4" />
        <path data-variant="up-down" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M8.5 19.5V4.5M5.1 7.9L8.5 4.5L11.9 7.9" />
        <path data-variant="up-down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M15.5 4.5V19.5M12.1 16.1L15.5 19.5L18.9 16.1" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.50; transform-origin: 12px 12px" d="M19.5 8.5H4.5M7.9 5.1L4.5 8.5L7.9 11.9" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 15.5H19.5M16.1 12.1L19.5 15.5L16.1 18.9" />
      </svg></figure>
      <figure><figcaption>down</figcaption><svg class="fbi" data-animate="always" data-variant="down" 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="up" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 19.5V4.5M7.6 8.9L12 4.5L16.4 8.9" />
        <path data-variant="down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 4.5V19.5M7.6 15.1L12 19.5L16.4 15.1" />
        <path data-variant="left" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M19.5 12H4.5M8.9 7.6L4.5 12L8.9 16.4" />
        <path data-variant="right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 12H19.5M15.1 7.6L19.5 12L15.1 16.4" />
        <path data-variant="up-down" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M8.5 19.5V4.5M5.1 7.9L8.5 4.5L11.9 7.9" />
        <path data-variant="up-down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M15.5 4.5V19.5M12.1 16.1L15.5 19.5L18.9 16.1" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.50; transform-origin: 12px 12px" d="M19.5 8.5H4.5M7.9 5.1L4.5 8.5L7.9 11.9" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 15.5H19.5M16.1 12.1L19.5 15.5L16.1 18.9" />
      </svg></figure>
      <figure><figcaption>left</figcaption><svg class="fbi" data-animate="always" data-variant="left" 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="up" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 19.5V4.5M7.6 8.9L12 4.5L16.4 8.9" />
        <path data-variant="down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 4.5V19.5M7.6 15.1L12 19.5L16.4 15.1" />
        <path data-variant="left" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M19.5 12H4.5M8.9 7.6L4.5 12L8.9 16.4" />
        <path data-variant="right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 12H19.5M15.1 7.6L19.5 12L15.1 16.4" />
        <path data-variant="up-down" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M8.5 19.5V4.5M5.1 7.9L8.5 4.5L11.9 7.9" />
        <path data-variant="up-down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M15.5 4.5V19.5M12.1 16.1L15.5 19.5L18.9 16.1" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.50; transform-origin: 12px 12px" d="M19.5 8.5H4.5M7.9 5.1L4.5 8.5L7.9 11.9" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 15.5H19.5M16.1 12.1L19.5 15.5L16.1 18.9" />
      </svg></figure>
      <figure><figcaption>right</figcaption><svg class="fbi" data-animate="always" data-variant="right" 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="up" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 19.5V4.5M7.6 8.9L12 4.5L16.4 8.9" />
        <path data-variant="down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 4.5V19.5M7.6 15.1L12 19.5L16.4 15.1" />
        <path data-variant="left" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M19.5 12H4.5M8.9 7.6L4.5 12L8.9 16.4" />
        <path data-variant="right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 12H19.5M15.1 7.6L19.5 12L15.1 16.4" />
        <path data-variant="up-down" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M8.5 19.5V4.5M5.1 7.9L8.5 4.5L11.9 7.9" />
        <path data-variant="up-down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M15.5 4.5V19.5M12.1 16.1L15.5 19.5L18.9 16.1" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.50; transform-origin: 12px 12px" d="M19.5 8.5H4.5M7.9 5.1L4.5 8.5L7.9 11.9" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 15.5H19.5M16.1 12.1L19.5 15.5L16.1 18.9" />
      </svg></figure>
      <figure><figcaption>up-down</figcaption><svg class="fbi" data-animate="always" data-variant="up-down" 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="up" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 19.5V4.5M7.6 8.9L12 4.5L16.4 8.9" />
        <path data-variant="down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 4.5V19.5M7.6 15.1L12 19.5L16.4 15.1" />
        <path data-variant="left" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M19.5 12H4.5M8.9 7.6L4.5 12L8.9 16.4" />
        <path data-variant="right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 12H19.5M15.1 7.6L19.5 12L15.1 16.4" />
        <path data-variant="up-down" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M8.5 19.5V4.5M5.1 7.9L8.5 4.5L11.9 7.9" />
        <path data-variant="up-down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M15.5 4.5V19.5M12.1 16.1L15.5 19.5L18.9 16.1" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.50; transform-origin: 12px 12px" d="M19.5 8.5H4.5M7.9 5.1L4.5 8.5L7.9 11.9" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 15.5H19.5M16.1 12.1L19.5 15.5L16.1 18.9" />
      </svg></figure>
      <figure><figcaption>left-right</figcaption><svg class="fbi" data-animate="always" data-variant="left-right" 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="up" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 19.5V4.5M7.6 8.9L12 4.5L16.4 8.9" />
        <path data-variant="down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 4.5V19.5M7.6 15.1L12 19.5L16.4 15.1" />
        <path data-variant="left" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M19.5 12H4.5M8.9 7.6L4.5 12L8.9 16.4" />
        <path data-variant="right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 12H19.5M15.1 7.6L19.5 12L15.1 16.4" />
        <path data-variant="up-down" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M8.5 19.5V4.5M5.1 7.9L8.5 4.5L11.9 7.9" />
        <path data-variant="up-down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M15.5 4.5V19.5M12.1 16.1L15.5 19.5L18.9 16.1" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.50; transform-origin: 12px 12px" d="M19.5 8.5H4.5M7.9 5.1L4.5 8.5L7.9 11.9" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 15.5H19.5M16.1 12.1L19.5 15.5L16.1 18.9" />
      </svg></figure>
      </div>
      <button type="button" class="fbi-hot-target"><svg class="fbi" data-animate="hover" data-variant="right" 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="up" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 19.5V4.5M7.6 8.9L12 4.5L16.4 8.9" />
        <path data-variant="down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M12 4.5V19.5M7.6 15.1L12 19.5L16.4 15.1" />
        <path data-variant="left" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M19.5 12H4.5M8.9 7.6L4.5 12L8.9 16.4" />
        <path data-variant="right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 12H19.5M15.1 7.6L19.5 12L15.1 16.4" />
        <path data-variant="up-down" class="fbi-layer fbi-bounce" style="--delay: 0.00; transform-origin: 12px 12px" d="M8.5 19.5V4.5M5.1 7.9L8.5 4.5L11.9 7.9" />
        <path data-variant="up-down" class="fbi-layer fbi-slide-y" style="--delay: 0.00; transform-origin: 12px 12px" d="M15.5 4.5V19.5M12.1 16.1L15.5 19.5L18.9 16.1" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.50; transform-origin: 12px 12px" d="M19.5 8.5H4.5M7.9 5.1L4.5 8.5L7.9 11.9" />
        <path data-variant="left-right" class="fbi-layer fbi-slide-x" style="--delay: 0.00; transform-origin: 12px 12px" d="M4.5 15.5H19.5M16.1 12.1L19.5 15.5L16.1 18.9" />
      </svg> Arrow</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
