Skip to content

11 icons · MIT licensed

Animated e-commerce icons

Shopping carts, bags, price tags, gifts, credit cards and delivery trucks for online stores. An add-to-cart animation confirms the click without a toast, and the truck and package icons give order status a little life.

Of the 11 icons, 1 replays on every click and 10 play once on hover. Each one comes as a React component, a shadcn/ui component and a Lottie JSON animation with static SVGs, free for commercial use under the MIT license.

All commerce icons

Where to use them

  • Add-to-cart buttons on product cards
  • Cart and bag buttons in a store header
  • Checkout and payment method selection
  • Discount, coupon and sale badges
  • Shipping and order tracking steps
  • Gift cards and gift wrap options

By interaction

  • Click animated icons · 1

    Replays once from the start on every click unless reduced motion is preferred. Shopping Cart.

  • Hover-to-play animated icons · 10

    Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it. Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck.

Add one to your app

With React, install react-useanimations and import the icon; it plays its click replay interaction on its own. Every icon in this category works the same way: swap shoppingCart for the name on its page.

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

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

With shadcn/ui, the CLI adds a ready-made component:

npx shadcn@latest add https://useanimations.com/r/shopping-cart.json
import { AnimatedShoppingCart } from '@/components/animations/shopping-cart';

<AnimatedShoppingCart size={24} />

Not using React? Each icon is a Lottie JSON file at /icons/<id>.json; see Lottie icons for web, iOS, Android and Flutter players.

FAQ

Which animated e-commerce icons are included?

11 icons: Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Shopping Cart, Tag and Truck. All of them are free for personal and commercial projects under the MIT license, with no attribution required.

How do I use these animated e-commerce icons in React?

Install react-useanimations, add import shoppingCart from 'react-useanimations/lib/shoppingCart' and render <UseAnimations animation={shoppingCart} size={32} />. The icon plays its click replay interaction and follows the text color. With shadcn/ui, run npx shadcn@latest add https://useanimations.com/r/shopping-cart.json instead.

Can I use these animated e-commerce icons without React?

Yes. Each icon is a Lottie JSON file at https://useanimations.com/icons/<id>.json (for example https://useanimations.com/icons/shopping-cart.json), playable with lottie-web, lottie-ios, lottie-android or Flutter's lottie package; static SVGs are on each icon page. None of them use expressions, so lottie-web's light build is enough.