---
title: "Heart rate animated icon"
description: "Heart rate animated icon (Health & Fitness). Light: the pulse trace draws across in 0.64 s and the heart gives one beat as the pen crosses the spike. Strong: the trace draws in 0.34 s and the heart double-beats (lub-dub) to 114%. The trace is retained; preview reset rearms."
canonical: https://generativeicons.com/icons/heart-rate/
---

# Heart rate animated icon

Light: the pulse trace draws across in 0.64 s and the heart gives one beat as the pen crosses the spike. Strong: the trace draws in 0.34 s and the heart double-beats (lub-dub) to 114%. The trace is retained; preview reset rearms.

- Id: `heart-rate`
- Category: Health & Fitness
- Search terms: pulse, heartbeat, bpm, ecg, ekg, cardio, cardiogram, vitals, heart monitor, beats per minute, cardiac
- Two states: prepared to result, played forward and back
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/heart-rate.lottie (dotLottie, 10492 bytes, sha256 7a8d915e67d4de7b68e10c2e1e5e8daa392b21829f1b4239dd16748f8f82fd80)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add heart-rate
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/heart-rate.mjs';

export function HeartRateIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/heart-rate.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.com/icons/heart-rate/ · https://generativeicons.com/api/icons/heart-rate