# Animated text editing icons

> 10 free animated text editing icons, including Align Center, Align Justify and Align Left. For React, shadcn/ui and Lottie JSON, MIT licensed.

Bold, italic, underline, alignment and list icons for rich text toolbars. A quick click animation confirms the formatting was applied, which helps in editors where the change to the text itself is subtle.

Of the 10 icons, 8 replay on every click and 2 play once on hover. Each one comes as a React component, a shadcn/ui component and a Lottie JSON animation with static SVGs, free for commercial use under the MIT license.

## Icons

- [Align Center](https://useanimations.com/icons/align-center) (`alignCenter`, click-replay)
- [Align Justify](https://useanimations.com/icons/align-justify) (`alignJustify`, click-replay)
- [Align Left](https://useanimations.com/icons/align-left) (`alignLeft`, click-replay)
- [Align Right](https://useanimations.com/icons/align-right) (`alignRight`, click-replay)
- [Bold](https://useanimations.com/icons/bold) (`bold`, click-replay)
- [Hash](https://useanimations.com/icons/hash) (`hash`, hover-replay)
- [Italic](https://useanimations.com/icons/italic) (`italic`, click-replay)
- [List](https://useanimations.com/icons/list) (`list`, hover-replay)
- [Type](https://useanimations.com/icons/type) (`type`, click-replay)
- [Underline](https://useanimations.com/icons/underline) (`underline`, click-replay)

## Where to use them

- Rich text editor toolbars
- Comment and message composers
- CMS and blog post editors
- Markdown and note-taking apps
- Text alignment controls in design tools

## By interaction

- [Click animated icons](https://useanimations.com/interactions/click-replay) (8): Replays once from the start on every click unless reduced motion is preferred.
- [Hover-to-play animated icons](https://useanimations.com/interactions/hover-replay) (2): Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it.

## Code

```jsx
import UseAnimations from 'react-useanimations';
import bold from 'react-useanimations/lib/bold';

<UseAnimations animation={bold} size={32} />
```

```bash
npx shadcn@latest add https://useanimations.com/r/bold.json
```

Every icon is also a Lottie JSON file at `https://useanimations.com/icons/<id>.json`: [Lottie icons](https://useanimations.com/lottie-icons).

## FAQ

### Which animated text editing icons are included?

10 icons: Align Center, Align Justify, Align Left, Align Right, Bold, Hash, Italic, List, Type and Underline. All of them are free for personal and commercial projects under the MIT license, with no attribution required.

### How do I use these animated text editing icons in React?

Install react-useanimations, add import bold from 'react-useanimations/lib/bold' and render <UseAnimations animation={bold} size={32} />. The icon plays its click replay interaction and follows the text color. With shadcn/ui, run npx shadcn@latest add https://useanimations.com/r/bold.json instead.

### Can I use these animated text editing icons without React?

Yes. Each icon is a Lottie JSON file at https://useanimations.com/icons/<id>.json (for example https://useanimations.com/icons/bold.json), playable with lottie-web, lottie-ios, lottie-android or Flutter's lottie package; static SVGs are on each icon page. None of them use expressions, so lottie-web's light build is enough.

## More categories

- [Animated alert icons](https://useanimations.com/categories/alerts) (5)
- [Animated notification bell icons](https://useanimations.com/categories/notifications) (4)
- [Animated navigation and arrow icons](https://useanimations.com/categories/navigation) (34)
- [Animated action icons](https://useanimations.com/categories/action) (64)
- [Animated file, folder and user icons](https://useanimations.com/categories/content) (22)
- [Animated form control icons](https://useanimations.com/categories/form) (3)
- [Animated media player icons](https://useanimations.com/categories/media) (28)
- [Animated communication icons](https://useanimations.com/categories/communication) (13)
- [Animated device icons](https://useanimations.com/categories/devices) (12)
- [Animated weather icons](https://useanimations.com/categories/weather) (16)
- [Animated map and location icons](https://useanimations.com/categories/maps-location) (9)
- [Animated e-commerce icons](https://useanimations.com/categories/commerce) (11)
- [Animated chart icons](https://useanimations.com/categories/charts) (5)
- [Animated developer icons](https://useanimations.com/categories/development) (9)
- [Animated design and layout icons](https://useanimations.com/categories/design-layout) (10)
- [Animated shape and math icons](https://useanimations.com/categories/shapes-math) (8)
- [Animated loading icons](https://useanimations.com/categories/loading) (5)
- [Animated social media icons](https://useanimations.com/categories/social-media) (22)
- [More animated icons](https://useanimations.com/categories/other) (10)

HTML version: https://useanimations.com/categories/text-editing