11 icônes · licence MIT

Icônes e-commerce animées

Paniers, sacs, étiquettes de prix, cadeaux, cartes bancaires et camions de livraison pour les boutiques en ligne. Une animation d’ajout au panier confirme le clic sans toast, et les icônes de camion et de colis donnent un peu de vie au suivi de commande.

Sur les 11 icônes, 1 se rejoue à chaque clic et 10 se jouent une fois au survol. Chacune est disponible en composant React, en composant shadcn/ui et en animation Lottie JSON, ainsi qu’en SVG statique, gratuitement pour un usage commercial sous licence MIT.

Toutes les icônes e-commerce

Où les utiliser

Boutons d’ajout au panier sur les fiches produit
Boutons panier et sac dans l’en-tête d’une boutique
Paiement et choix du moyen de paiement
Badges de remise, de code promo et de soldes
Étapes de livraison et de suivi de commande
Cartes cadeaux et options d’emballage cadeau

Par interaction

Icônes animées au clic · 1
Rejoue une fois l’animation depuis le début à chaque clic, sauf si la réduction des animations est activée. Shopping Cart.
Icônes animées à lecture au survol · 10
Se joue une fois sur mouseenter, sauf si la réduction des animations est activée. Sortir ne l’arrête pas ; entrer pendant la lecture ne la relance pas. Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck.

En ajouter une à votre app

Avec React, installez react-useanimations et importez l’icône : elle joue d’elle-même son interaction « relecture au clic ». Toutes les icônes de cette catégorie fonctionnent de la même façon : remplacez shoppingCart par le nom indiqué sur leur page.

npm install react-useanimations

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

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

Avec shadcn/ui, la CLI ajoute un composant prêt à l’emploi :

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

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

<AnimatedShoppingCart size={24} />

Vous n’utilisez pas React ? Chaque icône est un fichier Lottie JSON à l’adresse /icons/<id>.json ; la page Icônes Lottie présente les lecteurs pour le web, iOS, Android et Flutter.

Questions fréquentes

Quelles icônes e-commerce animées sont incluses ?

11 icônes : Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Shopping Cart, Tag et Truck. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.

Comment utiliser ces icônes e-commerce animées dans React ?

Installez react-useanimations, ajoutez import shoppingCart from 'react-useanimations/lib/shoppingCart' et affichez <UseAnimations animation={shoppingCart} size={32} />. L’icône joue son interaction « relecture au clic » et suit la couleur du texte. Avec shadcn/ui, lancez plutôt npx shadcn@latest add https://useanimations.com/r/shopping-cart.json.

Puis-je utiliser ces icônes e-commerce animées sans React ?

Oui. Chaque icône est un fichier Lottie JSON disponible à l’adresse https://useanimations.com/icons/<id>.json (par exemple https://useanimations.com/icons/shopping-cart.json), lisible avec lottie-web, lottie-ios, lottie-android ou le package lottie de Flutter ; les SVG statiques se trouvent sur la page de chaque icône (en anglais). Aucune n’utilise d’expressions : la version light de lottie-web suffit.