Langsung ke konten
ID

11 ikon · Berlisensi MIT

Ikon animasi e-commerce

Keranjang belanja, tas, label harga, hadiah, kartu kredit, dan truk pengiriman untuk toko online. Animasi tambah ke keranjang mengonfirmasi klik tanpa perlu toast, dan ikon truk serta paket membuat status pesanan sedikit lebih hidup.

Dari 11 ikon di kategori ini, 1 diputar ulang setiap kali diklik dan 10 diputar sekali saat di-hover. Setiap ikon tersedia sebagai komponen React, komponen shadcn/ui, dan animasi Lottie JSON, lengkap dengan SVG statis. Semuanya gratis untuk penggunaan komersial di bawah lisensi MIT.

Semua ikon e-commerce

Tempat memakainya

  • Tombol tambah ke keranjang di kartu produk
  • Tombol keranjang dan tas di header toko
  • Checkout dan pemilihan metode pembayaran
  • Badge diskon, kupon, dan promo
  • Tahapan pengiriman dan pelacakan pesanan
  • Pilihan kartu hadiah dan bungkus kado

Berdasarkan interaksi

  • Ikon animasi klik · 1

    Diputar ulang sekali dari awal setiap kali diklik, kecuali jika reduced motion dipilih. Shopping Cart.

  • Ikon animasi yang diputar saat hover · 10

    Diputar sekali saat mouseenter, kecuali jika reduced motion dipilih. Keluar dari ikon tidak menghentikannya, dan masuk lagi selama animasi berjalan tidak memulainya ulang. Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck.

Tambahkan ke aplikasi Anda

Di React, instal react-useanimations lalu import ikonnya; ikon langsung menjalankan interaksi putar ulang saat klik bawaannya. Semua ikon di kategori ini bekerja dengan cara yang sama: ganti shoppingCart dengan nama yang tertera di halaman ikonnya.

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

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

Dengan shadcn/ui, CLI-nya menambahkan komponen siap pakai:

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

<AnimatedShoppingCart size={24} />

Tidak memakai React? Setiap ikon adalah file Lottie JSON di /icons/<id>.json; lihat Ikon Lottie untuk player web, iOS, Android, dan Flutter.

FAQ

Ikon animasi e-commerce apa saja yang tersedia?

11 ikon: Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Shopping Cart, Tag, dan Truck. Semuanya gratis untuk proyek pribadi maupun komersial di bawah lisensi MIT, tanpa kewajiban atribusi.

Bagaimana cara memakai ikon animasi e-commerce ini di React?

Instal react-useanimations, tambahkan import shoppingCart from 'react-useanimations/lib/shoppingCart', lalu render <UseAnimations animation={shoppingCart} size={32} />. Ikon menjalankan interaksi putar ulang saat klik bawaannya dan mengikuti warna teks. Jika memakai shadcn/ui, jalankan npx shadcn@latest add https://useanimations.com/r/shopping-cart.json sebagai gantinya.

Bisakah ikon animasi e-commerce ini dipakai tanpa React?

Bisa. Setiap ikon adalah file Lottie JSON di https://useanimations.com/icons/<id>.json (misalnya https://useanimations.com/icons/shopping-cart.json) yang bisa diputar dengan lottie-web, lottie-ios, lottie-android, atau paket lottie untuk Flutter; SVG statis tersedia di halaman masing-masing ikon (halaman ikon hanya dalam bahasa Inggris). Tidak ada yang memakai expression, jadi build ringan lottie-web sudah cukup.