11 ícones · licença MIT

Ícones animados de e-commerce

Carrinhos, sacolas, etiquetas de preço, presentes, cartões de crédito e caminhões de entrega para lojas virtuais. Uma animação de adicionar ao carrinho confirma o clique sem precisar de toast, e os ícones de caminhão e de pacote dão um pouco de vida ao status do pedido.

Dos 11 ícones, 1 toca de novo a cada clique e 10 tocam uma vez no hover. Cada um vem como componente React, componente shadcn/ui e animação Lottie JSON, além de SVGs estáticos, e é gratuito para uso comercial sob a licença MIT.

Todos os ícones de e-commerce

Onde usar

Botões de adicionar ao carrinho nos cards de produto
Botões de carrinho e sacola no cabeçalho da loja
Checkout e escolha da forma de pagamento
Selos de desconto, cupom e promoção
Etapas de envio e rastreamento do pedido
Vale-presente e opções de embrulho para presente

Por interação

Ícones animados no clique · 1
Toca de novo desde o início a cada clique, a menos que o usuário prefira movimento reduzido. Shopping Cart.
Ícones animados que tocam no hover · 10
Toca uma vez no mouseenter, a menos que o usuário prefira movimento reduzido. Sair não interrompe a animação, e entrar durante a reprodução não a reinicia. Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck.

Adicione um ao seu app

Com React, instale o react-useanimations e importe o ícone; ele executa a interação “Reproduzir no clique” sozinho. Todos os ícones desta categoria funcionam do mesmo jeito: troque shoppingCart pelo nome que aparece na página do ícone.

npm install react-useanimations

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

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

Com o shadcn/ui, a CLI adiciona um componente pronto:

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

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

<AnimatedShoppingCart size={24} />

Não usa React? Cada ícone é um arquivo Lottie JSON em /icons/<id>.json; veja em Ícones Lottie os players para web, iOS, Android e Flutter.

Perguntas frequentes

Quais ícones animados de e-commerce estão incluídos?

11 ícones: Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Shopping Cart, Tag e Truck. Todos são gratuitos para projetos pessoais e comerciais sob a licença MIT, sem exigência de atribuição.

Como uso estes ícones animados de e-commerce no React?

Instale o react-useanimations, adicione import shoppingCart from 'react-useanimations/lib/shoppingCart' e renderize <UseAnimations animation={shoppingCart} size={32} />. O ícone executa a interação “Reproduzir no clique” e segue a cor do texto. Se você usa shadcn/ui, rode npx shadcn@latest add https://useanimations.com/r/shopping-cart.json.

Posso usar estes ícones animados de e-commerce sem React?

Sim. Cada ícone é um arquivo Lottie JSON em https://useanimations.com/icons/<id>.json (por exemplo, https://useanimations.com/icons/shopping-cart.json), que pode ser reproduzido com lottie-web, lottie-ios, lottie-android ou o pacote lottie do Flutter; os SVGs estáticos ficam na página de cada ícone (em inglês). Nenhum deles usa expressões, então o build light do lottie-web é suficiente.