---
title: "Word wrap animated icon"
description: "Word wrap animated icon (Text & document editing). The text wraps at the margin. Light: the return route draws itself from the margin, down and round the bend toward the next line at full speed, and the head is carried in at its end, stops dead just past its place and springs back. Strong: the top line first runs into the margin and springs back as the overflow wraps; the route draws faster, and the head lands harder with two decaying recoils. The two short lines never move."
canonical: https://generativeicons.com/icons/word-wrap/
---

# Word wrap animated icon

The text wraps at the margin. Light: the return route draws itself from the margin, down and round the bend toward the next line at full speed, and the head is carried in at its end, stops dead just past its place and springs back. Strong: the top line first runs into the margin and springs back as the overflow wraps; the route draws faster, and the head lands harder with two decaying recoils. The two short lines never move.

- Id: `word-wrap`
- Category: Text & document editing
- Search terms: text wrap, line wrap, soft wrap, wrap lines, line break, new line, carriage return, text overflow
- 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/word-wrap.lottie (dotLottie, 3453 bytes, sha256 6698b3b720f85ff413a4c2b08d442b6a1d409529b12b8311f518705e9c432c6e)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add word-wrap
```

## React

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

export function WordWrapIcon() {
  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/word-wrap.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/word-wrap/ · https://generativeicons.com/api/icons/word-wrap