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

ナビゲーション・矢印のアニメーションアイコン

閉じるボタンに変形するハンバーガーメニューのほか、ホバーすると向いている方向へ少し動く矢印、シェブロン、斜め矢印があります。ドロワーを開く、前に戻る、行を展開する、サイトの外へ移動するなど、その操作がどこへつながるのかがひと目でわかります。

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

使いどころ

モバイルで閉じるボタンに変わるハンバーガーメニュー
カルーセルやページネーションの前へ・次へボタン
アコーディオンやドロップダウンのシェブロン
ページトップへ戻る・下へスクロールの合図
サインイン・サインアウトのリンク
外部リンクの目印やサイドバーの開閉ボタン

インタラクション別

ループするアニメーションアイコン · 2
常に再生し続けます。モーション軽減が有効な場合は静止した最初のフレームのままです。More Horizontal, More Vertical.
クリックで切り替わるアニメーションアイコン · 4
クリックで 2 つの状態を切り替えます。モーション軽減が有効な場合はアニメーションせずに即座に切り替わります。Burger Menu, Menu V2, Menu V3, Menu V4.
クリックで動くアニメーションアイコン · 6
クリックするたびに最初から 1 回再生します。モーション軽減が有効な場合は再生しません。Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out.
ホバーで再生するアニメーションアイコン · 22
モーション軽減が有効でなければ、mouseenter で 1 回再生します。離れても止まらず、再生中にもう一度乗っても最初からにはなりません。Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar.

アプリに追加する

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

npm install react-useanimations

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

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

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

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

import { AnimatedMenu } from '@/components/animations/menu';

<AnimatedMenu size={24} />

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

よくある質問

ナビゲーション・矢印のアニメーションアイコンにはどんなアイコンがありますか？

34 個あります。Arrow down circle、Arrow Down Left、Arrow Down Right、Arrow Left、Arrow left circle、Arrow Right、Arrow right circle、Arrow up circle、Arrow Up Left、Arrow Up Right、Burger Menu、Chevron Down ほか 22 個です。どれも MIT ライセンスのもと個人・商用プロジェクトで無料で使え、クレジット表記も必要ありません。

ナビゲーション・矢印のアニメーションアイコンを React で使うには？

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

ナビゲーション・矢印のアニメーションアイコンは React なしでも使えますか？

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

ナビゲーションのアイコン一覧

使いどころ

インタラクション別

アプリに追加する

よくある質問