11 iconos · licencia MIT

Iconos animados de comercio electrónico

Carritos, bolsas de compra, etiquetas de precio, regalos, tarjetas de crédito y camiones de reparto para tiendas online. Una animación de añadir al carrito confirma el clic sin necesidad de un aviso emergente, y los iconos del camión y del paquete dan un poco de vida al estado del pedido.

De los 11 iconos, 1 se repite con cada clic y 10 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 comercio electrónico

Dónde usarlos

Botones de añadir al carrito en tarjetas de producto
Botones de carrito y bolsa en la cabecera de una tienda
Pago y selección del método de pago
Distintivos de descuentos, cupones y rebajas
Pasos de envío y seguimiento del pedido
Tarjetas regalo y opciones de envoltorio

Por interacción

Iconos animados al hacer clic · 1
Se reproduce una vez desde el principio con cada clic, salvo que se prefiera movimiento reducido. Shopping Cart.
Iconos animados que se reproducen con hover · 10
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. Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck.

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 shoppingCart por el nombre que aparece en la página de cada uno.

npm install react-useanimations

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

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

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

npx shadcn@latest add https://useanimations.com/r/shopping-cart.json

import { AnimatedShoppingCart } from '@/components/animations/shopping-cart';

<AnimatedShoppingCart 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 comercio electrónico se incluyen?

11 iconos: Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Shopping Cart, Tag y Truck. Todos son gratis para proyectos personales y comerciales con la licencia MIT, sin necesidad de atribución.

¿Cómo uso estos iconos animados de comercio electrónico en React?

Instala react-useanimations, añade import shoppingCart from 'react-useanimations/lib/shoppingCart' y renderiza <UseAnimations animation={shoppingCart} 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/shopping-cart.json.

¿Puedo usar estos iconos animados de comercio electrónico sin React?

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