10 iconos · licencia MIT

Iconos animados de edición de texto

Negrita, cursiva, subrayado, alineación y listas para barras de herramientas de texto enriquecido. Una animación breve al hacer clic confirma que se aplicó el formato, algo útil en editores donde el cambio en el propio texto es sutil.

De los 10 iconos, 8 se repiten con cada clic y 2 se reproducen una vez con hover. Cada uno se ofrece como componente de React, componente de shadcn/ui, animación Lottie JSON y SVG estático, gratis para uso comercial con la licencia MIT.

Todos los iconos de edición de texto

Dónde usarlos

Barras de herramientas de editores de texto enriquecido
Cajas para redactar comentarios y mensajes
Editores de CMS y de entradas de blog
Apps de Markdown y de notas
Controles de alineación de texto en herramientas de diseño

Por interacción

Iconos animados al hacer clic · 8
Se reproduce una vez desde el principio con cada clic, salvo que se prefiera movimiento reducido. Align Center, Align Justify, Align Left, Align Right, Bold, Italic, Type, Underline.
Iconos animados que se reproducen con hover · 2
Se reproduce una vez con mouseenter, salvo que se prefiera movimiento reducido. Salir no lo detiene, y volver a entrar durante la reproducción no lo reinicia. Hash, List.

Añade uno a tu app

Con React, instala react-useanimations e importa el icono; reproducirá por sí solo su interacción “Repetir con clic”. Todos los iconos de esta categoría funcionan igual: cambia bold por el nombre que aparece en la página de cada uno.

npm install react-useanimations

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

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

Con shadcn/ui, la CLI añade un componente listo para usar:

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

import { AnimatedBold } from '@/components/animations/bold';

<AnimatedBold size={24} />

¿No usas React? Cada icono es un archivo Lottie JSON en /icons/<id>.json; en Iconos Lottie encontrarás reproductores para web, iOS, Android y Flutter.

Preguntas frecuentes

¿Qué iconos animados de edición de texto se incluyen?

10 iconos: Align Center, Align Justify, Align Left, Align Right, Bold, Hash, Italic, List, Type y Underline. Todos son gratis para proyectos personales y comerciales con la licencia MIT, sin necesidad de atribución.

¿Cómo uso estos iconos animados de edición de texto en React?

Instala react-useanimations, añade import bold from 'react-useanimations/lib/bold' y renderiza <UseAnimations animation={bold} size={32} />. El icono reproduce su interacción “Repetir con clic” y sigue el color del texto. Con shadcn/ui, ejecuta en su lugar npx shadcn@latest add https://useanimations.com/r/bold.json.

¿Puedo usar estos iconos animados de edición de texto sin React?

Sí. Cada icono es un archivo Lottie JSON en https://useanimations.com/icons/<id>.json (por ejemplo, https://useanimations.com/icons/bold.json) que se reproduce con lottie-web, lottie-ios, lottie-android o el paquete lottie de Flutter; los SVG estáticos están en la página de cada icono (en inglés). Ninguno usa expresiones, así que basta con la versión ligera de lottie-web.