---
title: "Composing message animated icon"
description: "Composing message animated icon (Chat & messaging). The message is being typed. Light: the caret sweeps back over the top line, erasing it, then types it out again in three quick keystrokes, sliding right with each character until it is back at its insertion point. Strong: the caret sweeps back a touch past the line's start, types the line in four quicker keystrokes, then blinks twice, waiting for more. The bubble and the lower line never move."
canonical: https://generativeicons.lottiefiles.com/icons/composing-message/
---

# Composing message animated icon

The message is being typed. Light: the caret sweeps back over the top line, erasing it, then types it out again in three quick keystrokes, sliding right with each character until it is back at its insertion point. Strong: the caret sweeps back a touch past the line's start, types the line in four quicker keystrokes, then blinks twice, waiting for more. The bubble and the lower line never move.

- Id: `composing-message`
- Category: Chat & messaging
- Search terms: typing, writing, compose, draft, drafting, new message, write message, text cursor, caret
- 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.lottiefiles.com/assets/composing-message.lottie (dotLottie, 3579 bytes, sha256 b1e3325dfca1055feb4d9e8b655edd790e0819d3400ea737b79eed07b64a464a)
- License: MIT

## Install

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

## React

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

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