Heart icon

22:Tde3,--- /* GENERATED by scripts/registry/gen-icons.ts from content/icons/heart.json */ interface Props { size?: number; stroke?: number; color?: string; animate?: "hover" | "always" | "none"; state?: "off" | "on"; } const { size = 24, stroke = 2, color = "currentColor", animate = "hover", state = "off" } = Astro.props; --- 23:Tb972,

---
/* GENERATED by scripts/registry/gen-icons.ts from content/icons/heart.json */
interface Props {
  size?: number;
  stroke?: number;
  color?: string;
  animate?: "hover" | "always" | "none";
  state?: "off" | "on";
}
const { size = 24, stroke = 2, color = "currentColor", animate = "hover", state = "off" } = Astro.props;
---

<svg
  class="fbi"
  data-animate={animate}
  data-variant={state}
  viewBox="0 0 24 24"
  width={size}
  height={size}
  fill="none"
  stroke={color}
  stroke-width={stroke}
  stroke-linecap="round"
  stroke-linejoin="round"
  aria-hidden="true"
>
  <path data-variant="off" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" />
  <path data-variant="on" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" fill="currentColor" stroke="none" />
  <path data-variant="on" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" />
</svg>

<style>
.fbi { display: inline-block; vertical-align: middle; overflow: visible; --d: 1000ms; }
.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="off"] .fbi-layer[data-variant="off"] { display: inline; }
.fbi[data-variant="on"] .fbi-layer[data-variant="on"] { display: inline; }
.fbi .fbi-pulse { animation-name: fbi-pulse; 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>

24:T271f, Heart icon

always

hover

still

off

25:T19493,

<!doctype html>
<!-- GENERATED by scripts/registry/gen-icons.ts from content/icons/heart.json -->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Heart 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: 1000ms; }
      .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="off"] .fbi-layer[data-variant="off"] { display: inline; }
      .fbi[data-variant="on"] .fbi-layer[data-variant="on"] { display: inline; }
      .fbi .fbi-pulse { animation-name: fbi-pulse; 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="off" 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="off" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" />
        <path data-variant="on" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" fill="currentColor" stroke="none" />
        <path data-variant="on" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" />
      </svg></figure>
        <figure><figcaption>hover</figcaption><svg class="fbi" data-animate="hover" data-variant="off" 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="off" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" />
        <path data-variant="on" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" fill="currentColor" stroke="none" />
        <path data-variant="on" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" />
      </svg></figure>
        <figure><figcaption>still</figcaption><svg class="fbi" data-animate="none" data-variant="off" 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="off" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" />
        <path data-variant="on" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" fill="currentColor" stroke="none" />
        <path data-variant="on" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" />
      </svg></figure>
      </div>
      <div class="row">
      <figure><figcaption>off</figcaption><svg class="fbi" data-animate="always" data-variant="off" 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="off" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" />
        <path data-variant="on" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" fill="currentColor" stroke="none" />
        <path data-variant="on" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" />
      </svg></figure>
      <figure><figcaption>on</figcaption><svg class="fbi" data-animate="always" data-variant="on" 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="off" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" />
        <path data-variant="on" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" fill="currentColor" stroke="none" />
        <path data-variant="on" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" />
      </svg></figure>
      </div>
      <button type="button" class="fbi-hot-target"><svg class="fbi" data-animate="hover" data-variant="off" 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="off" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" />
        <path data-variant="on" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" fill="currentColor" stroke="none" />
        <path data-variant="on" class="fbi-layer fbi-pulse" style="--delay: 0.00; transform-origin: 12px 12.6px" d="M12 20.2C9.3 18.2 3.5 14.2 3.5 9.5a4.5 4.5 0 0 1 8.5-2.2 4.5 4.5 0 0 1 8.5 2.2c0 4.7-5.8 8.7-8.5 10.7Z" />
      </svg> Heart</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