本文へスキップ
JA

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

天気のアニメーションアイコン

太陽、月、雲、雨、雪、雷、風のアイコンで、天気予報や時間帯に合わせた表示に使えます。太陽と月はライトモードとダークモードの切り替えスイッチにもぴったりです。

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

天気のアイコン一覧

使いどころ

  • 天気ウィジェットや予報カード
  • ライトテーマ・ダークテーマの切り替えスイッチ
  • 旅行アプリの日の出・日の入り時刻
  • スマートホームのダッシュボードに出す気温
  • エネルギーや電力の状態表示

インタラクション別

アプリに追加する

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/sun.json
import { AnimatedSun } from '@/components/animations/sun';

<AnimatedSun size={24} />

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

よくある質問

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

16 個あります。Cloud、Cloud Drizzle、Cloud Lightning、Cloud Off、Cloud Rain、Cloud Snow、Droplet、Moon、Sun、Sunrise、Sunset、Thermometer ほか 4 個です。どれも MIT ライセンスのもと個人・商用プロジェクトで無料で使え、クレジット表記も必要ありません。

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

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

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

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