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

アクションのアニメーションアイコン

保存、削除、ダウンロード、更新、いいね、ブックマーク、検索、設定といった、インターフェースの「動詞」にあたるアイコンです。それぞれが対応するクリックやホバーに反応して操作を確かめさせてくれます。投稿にいいねするとハートが塗りつぶされ、削除する前にはゴミ箱のふたが持ち上がります。

64 個の内訳は、常にループ再生するもの 2 個、クリックで 2 つの状態を切り替えるもの 14 個、クリックのたびに最初から再生するもの 30 個、ホバーで再生し、ポインターが離れると逆再生するもの 11 個、ホバーで 1 回再生するもの 6 個、ホバー中にループ再生するもの 1 個です。どのアイコンも React コンポーネント、shadcn/ui コンポーネント、Lottie JSON アニメーションとして提供され（うち 61 個は静的 SVG も用意）、MIT ライセンスのもと商用利用も無料です。

使いどころ

カード上のいいね・お気に入り・ブックマークボタン
操作の完了を伝えるダウンロード・アップロード・保存ボタン
ログインフォームのパスワード表示・非表示の切り替え
ダッシュボードの更新・同期ボタン
テーブルやファイル一覧の削除ボタン
クリアボタンに変わる検索フィールド

インタラクション別

ループするアニメーションアイコン · 2
常に再生し続けます。モーション軽減が有効な場合は静止した最初のフレームのままです。Checkmark, Help.
クリックで切り替わるアニメーションアイコン · 14
クリックで 2 つの状態を切り替えます。モーション軽減が有効な場合はアニメーションせずに即座に切り替わります。Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off, Star, Thumb up, Visibility, Visibility V2, Visibility V3.
クリックで動くアニメーションアイコン · 30
クリックするたびに最初から 1 回再生します。モーション軽減が有効な場合は再生しません。Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2, Edit 2, Edit 3, Filter, Heart V2, Link, Link 2, Minus, Minus Circle, Minus Square, Plus Circle, Plus Square, Power, Refresh, Refresh Ccw, Refresh V2, Rotate Ccw, Rotate Cw, Save, Thumbs Down, Upload, Upload Cloud, X Square.
ホバーで動くアニメーションアイコン · 11
mouseenter で順方向に、mouseleave で逆方向に再生します。Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out.
ホバーで再生するアニメーションアイコン · 6
モーション軽減が有効でなければ、mouseenter で 1 回再生します。離れても止まらず、再生中にもう一度乗っても最初からにはなりません。Award, Key, Maximize 2, Minimize 2, Shield, Slash.
ホバー中にループするアニメーションアイコン · 1
ホバー中はループし、mouseleave のあとは今のサイクルを最後まで再生します。モーション軽減が有効な場合は静止したままです。Flag.

アプリに追加する

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

npm install react-useanimations

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

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

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

npx shadcn@latest add https://useanimations.com/r/heart.json

import { AnimatedHeart } from '@/components/animations/heart';

<AnimatedHeart size={24} />

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

よくある質問

アクションのアニメーションアイコンにはどんなアイコンがありますか？

64 個あります。Award、Bookmark、Calendar、Check、Check Circle、Checkmark、Chevron left、Chevron right、Delete、Download、Download Cloud、Download V2 ほか 52 個です。どれも MIT ライセンスのもと個人・商用プロジェクトで無料で使え、クレジット表記も必要ありません。

アクションのアニメーションアイコンを React で使うには？

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

アクションのアニメーションアイコンは React なしでも使えますか？

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

アクションのアイコン一覧

使いどころ

インタラクション別

アプリに追加する

よくある質問