本文へスキップ
JA
v3300 個のアイコン · 依存関係ゼロ · MIT→

動き出すアイコン。

React、shadcn/ui、Lottie で使える無料のアニメーションアイコン

ホバー、クリック、ループのマイクロインタラクションを内蔵した、手作りのマイクロアニメーション 300 個。React コンポーネントとして使うことも、shadcn で追加することも、SVG や Lottie JSON をダウンロードすることもできます。MIT ライセンス。

アイコンを探す

フィールドの上でポインターを動かしてみてください。

アニメーションアイコン
300
アニメーションアイコン
内蔵インタラクション
6
内蔵インタラクション
プレーヤー（gzip 圧縮後）
8 kB
プレーヤー（gzip 圧縮後）
依存関係
0
依存関係

インタラクション内蔵

どのアイコンも、自分の動き方を知っている。

どのアイコンにも、デザインしたときに想定したインタラクションが付いています。置くだけでそのまま動き、prop ひとつで別の動きに変えることもできます。試してみてください：

ライブラリ

300 個の無料アニメーションアイコン

ホバーやクリックで再生できます。アイコンを開くと、コードとダウンロード（Lottie JSON、SVG、ZIP）が表示されます。

300 個のアイコン

アラート

通知

ナビゲーション

アクション

コンテンツ

フォーム

メディア

テキスト編集

コミュニケーション

デバイス

天気

地図・位置情報

EC・ショッピング

グラフ

開発

デザイン・レイアウト

図形・数学

ローディング

SNS

その他

好きな方法で使う

インストールして、インポートするだけ。

依存関係のない React コンポーネント、shadcn レジストリ、URL が固定されたダウンロード用ファイル、そして AI エージェントが読めるカタログを用意しています。

ドキュメントを読む →
import UseAnimations from 'react-useanimations';
import menu from 'react-useanimations/lib/menu';

export function MenuButton({ open, onToggle }) {
  return (
    <UseAnimations
      animation={menu}
      active={open}
      onClick={onToggle}
      size={28}
    />
  );
}

軽くて、アクセシブルで、スタイルは自由。

テキストの色に追従

アイコンは currentColor を使うので、テキストの色、ホバー時の色、ダークモードに自動で合わせます。prop、クラス、素の CSS で上書きすることもできます。

小ささにこだわった設計

8 kB

プレーヤーを内蔵し、依存関係はゼロ。アイコンはそれぞれ 2 kB の独立したモジュールです。

最初からアクセシブル

モーション軽減の設定を尊重し、キーボードフォーカスでもホバーアニメーションを再生します。ラベルを付けない限り、スクリーンリーダーには読み上げられません。

サーバーサイドレンダリング対応

Next.js、Remix、Astro でも安全にレンダリングできるクライアントコンポーネントです。アイコンはただのデータなので、どこからでもインポートできます。

AI エージェント向け

全アイコンのキーワードを含む型付きカタログ icons.json、llms.txt、Markdown 版のドキュメントを用意しています。

ぴったりのマイクロアニメーションを見つける。

よくある質問

マイクロアニメーションやアニメーションアイコンとは何ですか？

マイクロアニメーションは、ユーザーの操作に応える短く目的の明確な動きです。メニューアイコンが閉じるボタンに変わる、投稿にいいねするとハートが塗りつぶされる、新しい通知でベルが鳴る、といったものです。アニメーションアイコンはその代表的な例で、インターフェースの反応をよくし、余計なテキストなしで状態の変化を伝えられます。

Lottie ファイルと SVG ファイルの違いは何ですか？

Lottie JSON ファイルにはアニメーション全体が入っていて、react-useanimations に内蔵のプレーヤーを含め、どの Lottie プレーヤーでも再生できます。SVG ファイルは静止状態のアイコンの画像で、状態ごとに 1 つずつ（たとえば eye と eye-off）あります。メール、ドキュメント、デザインツール、JavaScript が使えない環境のフォールバックなど、動かしたくない場所で使います。

Next.js やサーバーサイドレンダリングでも使えますか？

はい。コンポーネントには 'use client' が付いていて、アニメーションはブラウザーでのみ描画されます。そのため、サーバーコンポーネントや Next.js、Remix、Astro などの SSR フレームワークから、動的インポートなしでレンダリングできます。アイコンのモジュールはただのデータなので、サーバーコンポーネントでインポートして props として渡せます。 Next.js とサーバーサイドレンダリング →

商用プロジェクトでも使えますか？

はい。アイコンと react-useanimations パッケージは MIT ライセンスです。個人・商用を問わず、使用、改変、再配布ができます。クレジット表記は歓迎しますが、必須ではありません。 ライセンスと利用規約 →

React なしでもアイコンを使えますか？

はい。どのアイコンも標準的な Lottie JSON ファイルなので、素の JavaScript、Vue、Svelte、Angular、CMS では lottie-web で、iOS、Android、Flutter ではそれぞれの Lottie プレーヤーで再生できます。Lottie アイコンのページに、ファイルの URL とインタラクションごとの lottie-web のコード例をまとめています。 Lottie アイコン →

バンドルサイズはどのくらい増えますか？

react-useanimations 3.1.1 のプレーヤーは gzip 圧縮後で約 8 kB、依存関係はありません。アイコンはそれぞれ 1〜15 kB（中央値 2 kB）の独立したモジュールなので、バンドルに含まれるのはインポートしたアイコンだけです。

インターフェースに鼓動を。

無料で MIT ライセンス。個人でも商用でも使えます。

はじめる