10 iconos · licencia MIT

Iconos animados de diseño y maquetación

Cuadrículas, columnas, capas, recorte, pluma y cursor para editores y constructores de páginas. Encajan en barras de herramientas donde los usuarios organizan contenido, cambian entre vista de cuadrícula y de tabla o eligen una herramienta de dibujo.

De los 10 iconos, 3 se repiten con cada clic y 7 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 diseño y maquetación

Dónde usarlos

Conmutadores entre vista de cuadrícula, lista y tabla
Paneles de capas en herramientas de diseño y de presentaciones
Herramientas de recortar en editores de imágenes
Constructores de páginas y selectores de diseño
Asas para arrastrar y mover

Por interacción

Iconos animados al hacer clic · 3
Se reproduce una vez desde el principio con cada clic, salvo que se prefiera movimiento reducido. Crop, Mouse Pointer, Scissors.
Iconos animados que se reproducen con hover · 7
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. Columns, Grid, Layers, Layout, Move, Pen Tool, Table.

Añade uno a tu app

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

npm install react-useanimations

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

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

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

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

import { AnimatedLayers } from '@/components/animations/layers';

<AnimatedLayers 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 diseño y maquetación se incluyen?

10 iconos: Columns, Crop, Grid, Layers, Layout, Mouse Pointer, Move, Pen Tool, Scissors y Table. Todos son gratis para proyectos personales y comerciales con la licencia MIT, sin necesidad de atribución.

¿Cómo uso estos iconos animados de diseño y maquetación en React?

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

¿Puedo usar estos iconos animados de diseño y maquetación sin React?

Sí. Cada icono es un archivo Lottie JSON en https://useanimations.com/icons/<id>.json (por ejemplo, https://useanimations.com/icons/layers.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.