---
title: "Disappearing message animated icon"
description: "Disappearing message animated icon (Chat & messaging). The message timer is set. Light: the hourglass flips over (a half turn about its waist) and stops dead with a small rebound; the old sand empties out as it turns, then a stream of sand runs through the waist into the lower chamber and the sand settles there again. Strong: a short wind-up the other way, a harder flip that rebounds and settles in two beats, then the same stream. The hourglass draws in a little while it turns so its corners clear the bubble; the bubble never moves."
canonical: https://generativeicons.com/icons/disappearing-message/
---

# Disappearing message animated icon

The message timer is set. Light: the hourglass flips over (a half turn about its waist) and stops dead with a small rebound; the old sand empties out as it turns, then a stream of sand runs through the waist into the lower chamber and the sand settles there again. Strong: a short wind-up the other way, a harder flip that rebounds and settles in two beats, then the same stream. The hourglass draws in a little while it turns so its corners clear the bubble; the bubble never moves.

- Id: `disappearing-message`
- Category: Chat & messaging
- Search terms: self destruct, self-destructing, ephemeral, vanish mode, expiring message, auto delete, temporary message, timed message, burn after reading
- 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/disappearing-message.lottie (dotLottie, 4265 bytes, sha256 e0ff1cff82bed2ecbdf58e6c34d0831262808ee61a8db32eea6728360d19bbe1)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add disappearing-message
```

## React

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

export function DisappearingMessageIcon() {
  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/disappearing-message.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/disappearing-message/ · https://generativeicons.com/api/icons/disappearing-message