本文へスキップ
JA

11 個のアイコン · MIT ライセンス

EC・ショッピングのアニメーションアイコン

オンラインストア向けのショッピングカート、買い物袋、値札、ギフト、クレジットカード、配送トラックのアイコンです。カートに追加するアニメーションがあればトースト通知なしでもクリックが伝わり、トラックや荷物のアイコンは注文状況の表示にちょっとした動きを添えます。

11 個の内訳は、クリックのたびに最初から再生するもの 1 個、ホバーで 1 回再生するもの 10 個です。どのアイコンも React コンポーネント、shadcn/ui コンポーネント、Lottie JSON アニメーション、静的 SVG として提供され、MIT ライセンスのもと商用利用も無料です。

EC・ショッピングのアイコン一覧

使いどころ

  • 商品カードのカートに追加ボタン
  • ストアヘッダーのカート・買い物袋ボタン
  • 購入手続きと支払い方法の選択
  • 割引・クーポン・セールのバッジ
  • 配送・注文追跡のステップ表示
  • ギフトカードやギフトラッピングの選択肢

インタラクション別

アプリに追加する

React では react-useanimations をインストールしてアイコンをインポートするだけで、「クリックで再生」のインタラクションで動きます。このカテゴリのアイコンはどれも使い方が同じなので、shoppingCart を各アイコンのページに載っている名前に置き換えてください。

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

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

shadcn/ui なら、CLI ですぐに使えるコンポーネントを追加できます：

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

<AnimatedShoppingCart size={24} />

React を使わない場合も、各アイコンは /icons/<id>.json にある Lottie JSON ファイルとして使えます。Web、iOS、Android、Flutter 向けのプレーヤーは Lottie アイコンを参照してください。

よくある質問

EC・ショッピングのアニメーションアイコンにはどんなアイコンがありますか？

11 個あります。Box、Briefcase、Credit Card、Dollar Sign、Gift、Package、Percent、Shopping Bag、Shopping Cart、Tag、Truckです。どれも MIT ライセンスのもと個人・商用プロジェクトで無料で使え、クレジット表記も必要ありません。

EC・ショッピングのアニメーションアイコンを React で使うには？

react-useanimations をインストールし、import shoppingCart from 'react-useanimations/lib/shoppingCart' を追加して <UseAnimations animation={shoppingCart} size={32} /> をレンダリングします。アイコンは「クリックで再生」のインタラクションで動き、テキストの色に合わせて表示されます。shadcn/ui を使う場合は、代わりに npx shadcn@latest add https://useanimations.com/r/shopping-cart.json を実行してください。

EC・ショッピングのアニメーションアイコンは React なしでも使えますか？

はい。各アイコンは https://useanimations.com/icons/<id>.json（例：https://useanimations.com/icons/shopping-cart.json）にある Lottie JSON ファイルで、lottie-web、lottie-ios、lottie-android、Flutter の lottie パッケージで再生できます。静的 SVG は各アイコンのページ（英語）からダウンロードできます。エクスプレッションを使うアイコンはないので、lottie-web のライトビルドで十分です。