---
title: "Two hearts animated icon"
description: "Two hearts animated icon (Emoji). Two hearts flutter up together like love bubbles. Light: the large heart beats once, and 100 ms later the small heart rises, tipping as it goes, and lands back with a little tilt. Strong: the large heart dips and rises with a beat, then the small one floats up higher, swinging from side to side; each lands with a soft settle."
canonical: https://generativeicons.com/icons/two-hearts/
---

# Two hearts animated icon

Two hearts flutter up together like love bubbles. Light: the large heart beats once, and 100 ms later the small heart rises, tipping as it goes, and lands back with a little tilt. Strong: the large heart dips and rises with a beat, then the small one floats up higher, swinging from side to side; each lands with a soft settle.

- Id: `two-hearts`
- Category: Emoji
- Search terms: hearts emoji, pair of hearts, couple, lovers, sweethearts, love each other, xoxo, crush
- One action, back to rest
- 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/two-hearts.lottie (dotLottie, 5777 bytes, sha256 c4e63250b117636cee56193a6c2612c8715a125eb1444639b2f48eecc6db39b9)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add two-hearts
```

## React

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

export function TwoHeartsIcon() {
  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/two-hearts.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/two-hearts/ · https://generativeicons.com/api/icons/two-hearts