本文へスキップ
JA

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

グラフのアニメーションアイコン

アクセス解析やレポート向けの棒グラフ、円グラフ、トレンド矢印のアイコンです。上昇・下降のトレンドアイコンを使えば指標が上がったのか下がったのかがひと目でわかるので、KPI カードや数値の推移を伝える更新履歴に合います。

5 個すべてがホバーで 1 回再生するアイコンです。どのアイコンも React コンポーネント、shadcn/ui コンポーネント、Lottie JSON アニメーション、静的 SVG として提供され、MIT ライセンスのもと商用利用も無料です。

グラフのアイコン一覧

使いどころ

  • 指標の増減を示す KPI カード
  • アクセス解析・レポートのナビゲーション項目
  • ダッシュボードの空状態
  • 財務やポートフォリオのサマリー

インタラクション別

  • ホバーで再生するアニメーションアイコン · 5

    モーション軽減が有効でなければ、mouseenter で 1 回再生します。離れても止まらず、再生中にもう一度乗っても最初からにはなりません。Bar Chart, Bar Chart 2, Pie Chart, Trending Down, Trending Up.

アプリに追加する

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/trending-up.json
import { AnimatedTrendingUp } from '@/components/animations/trending-up';

<AnimatedTrendingUp size={24} />

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

よくある質問

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

5 個あります。Bar Chart、Bar Chart 2、Pie Chart、Trending Down、Trending Upです。どれも MIT ライセンスのもと個人・商用プロジェクトで無料で使え、クレジット表記も必要ありません。

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

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

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

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