Lottie Hover Icon Button — Free Inline-JSON Lottie Snippet

<div class="lb-wrap">
  <button class="lb-btn" id="lbBtn">
    <span class="lb-icon" id="lbIcon"></span>
    <span class="lb-label">Add to favorites</span>
  </button>
  <p class="lb-hint">Hover the button — the icon plays a Lottie animation.</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0d16;color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center}
.lb-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.lb-btn{display:flex;align-items:center;gap:10px;padding:12px 22px 12px 16px;border-radius:999px;border:1px solid #2a2f4a;background:linear-gradient(135deg,#181c30,#12121f);color:#fff;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .2s,transform .15s}
.lb-btn:hover{border-color:#f472b6}
.lb-btn:active{transform:scale(.97)}
.lb-icon{width:28px;height:28px;display:block;flex-shrink:0}
.lb-hint{font-size:12px;color:#6d7291}

// A minimal but genuinely valid Lottie animation defined inline and passed
// straight to animationData: no hosted .json, no network request, nothing that
// can 404. A grey heart sits visible at frame 0 (the resting state); playing
// forward pops it to 120% and fades its fill to pink over 30 frames (1s at
// 30fps). Every keyframe carries its own end value (e) and easing (i / o), which
// lottie-web needs to interpolate. Without them the fill never resolves and the
// icon renders as a black blob.
const ease = { i: { x: 0.3, y: 1 }, o: { x: 0.2, y: 0 } };

const heartAnimation = {
  v: '5.9.0', fr: 30, ip: 0, op: 30, w: 100, h: 100, nm: 'heart', ddd: 0,
  assets: [],
  layers: [{
    ddd: 0, ind: 1, ty: 4, nm: 'heart-shape', sr: 1,
    ks: {
      o: { a: 0, k: 100 },
      r: { a: 0, k: 0 },
      p: { a: 0, k: [50, 50, 0] },
      a: { a: 0, k: [0, 0, 0] },
      s: {
        a: 1,
        k: [
          { t: 0,  s: [100, 100, 100], e: [120, 120, 100], ...ease },
          { t: 14, s: [120, 120, 100], e: [100, 100, 100], ...ease },
          { t: 30 },
        ],
      },
    },
    ao: 0,
    shapes: [{
      ty: 'gr',
      it: [
        {
          ty: 'sh', ix: 1,
          ks: { a: 0, k: {
            v: [[0, 34], [-18, -31], [0, -16], [18, -31]],
            i: [[39, -26], [-21, 0], [0, -8], [-10, 0]],
            o: [[-39, -26], [10, 0], [0, -8], [21, 0]],
            c: true,
          } },
        },
        {
          ty: 'fl', ix: 2,
          c: { a: 1, k: [
            { t: 0,  s: [0.43, 0.45, 0.57, 1], e: [0.96, 0.26, 0.57, 1], ...ease },
            { t: 12, s: [0.96, 0.26, 0.57, 1], e: [0.96, 0.26, 0.57, 1], ...ease },
            { t: 30 },
          ] },
          o: { a: 0, k: 100 },
        },
        { ty: 'tr', p: { a: 0, k: [0, 0] }, a: { a: 0, k: [0, 0] }, s: { a: 0, k: [100, 100] }, r: { a: 0, k: 0 }, o: { a: 0, k: 100 } },
      ],
      nm: 'heart-group',
    }],
    ip: 0, op: 30, st: 0, bm: 0,
  }],
};

const anim = lottie.loadAnimation({
  container: document.getElementById('lbIcon'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  animationData: heartAnimation,
});

const btn = document.getElementById('lbBtn');
btn.addEventListener('mouseenter', () => {
  anim.setDirection(1);
  anim.play();
});
btn.addEventListener('mouseleave', () => {
  anim.setDirection(-1);
  anim.play();
});