本文へスキップ
JA

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

その他のアニメーションアイコン

ほかの大きなグループに属さないアイコンです。フィードバック用の顔文字、コーヒーカップ、時計、脈拍の線、下へスクロールの合図があります。下へスクロールのアイコンは、ヒーローセクションで続きがあることを示す定番のヒントです。

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

その他のアイコン一覧

使いどころ

  • ヒーローセクション下部の下へスクロールのヒント
  • フィードバックウィジェットの笑顔・普通・悲しい顔
  • アクティビティや稼働状況のインジケーター
  • 営業時間や時刻の選択
  • 「コーヒーをおごる」などの支援リンク

インタラクション別

アプリに追加する

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/scroll-down.json
import { AnimatedScrollDown } from '@/components/animations/scroll-down';

<AnimatedScrollDown size={24} />

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

よくある質問

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

10 個あります。Activity、Arrow down、Arrow up、Clock、Coffee、Frown、Meh、Scroll down、Smile、Toolです。どれも MIT ライセンスのもと個人・商用プロジェクトで無料で使え、クレジット表記も必要ありません。

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

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

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

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