---
title: "Text area animated icon"
description: "Text area animated icon (Forms & input). A multi-line text area is resized taller. Light: the resize grip in the bottom corner is pulled down, the box's bottom edge follows it, and the line of text that was cut off writes in as the room opens. Strong: the grip is pressed, yanked down past the new size and springs back to it, and the hidden line snaps in. The top edge and the first two lines never move; the reverse pushes the grip back up and the third line is hidden again."
canonical: https://generativeicons.com/icons/text-area/
---

# Text area animated icon

A multi-line text area is resized taller. Light: the resize grip in the bottom corner is pulled down, the box's bottom edge follows it, and the line of text that was cut off writes in as the room opens. Strong: the grip is pressed, yanked down past the new size and springs back to it, and the hidden line snaps in. The top edge and the first two lines never move; the reverse pushes the grip back up and the third line is hidden again.

- Id: `text-area`
- Category: Forms & input
- Search terms: textarea, multiline, multi-line input, multiline input, long text, paragraph input, message box, comment box, description field, resizable input, resize grip
- Two states: compact to expanded, 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/text-area.lottie (dotLottie, 7932 bytes, sha256 cdbc4f54dc7389292f26c801cbb1177c6b93acb55036fdd574d8216e36b2f6f9)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add text-area
```

## React

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

export function TextAreaIcon() {
  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/text-area.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/text-area/ · https://generativeicons.com/api/icons/text-area