本文へスキップ
JA

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

デバイスのアニメーションアイコン

スマートフォン、タブレット、モニター、スマートウォッチ、プリンターと、Wi-Fi、Bluetooth、バッテリーといった接続まわりのインジケーターです。デバイスの選択、レスポンシブプレビューの切り替え、接続状態の表示に使えます。

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

デバイスのアイコン一覧

使いどころ

  • モバイル・タブレット・デスクトップのレスポンシブプレビュー切り替え
  • Wi-Fi や Bluetooth の接続状態
  • バッテリー残量・充電中の表示
  • アカウントのセキュリティ設定にあるデバイス一覧
  • 請求書やレポートの印刷ボタン

インタラクション別

アプリに追加する

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

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

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

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

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

<AnimatedWifi size={24} />

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

よくある質問

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

12 個あります。Battery、Battery Charging、Bluetooth、CPU、Hard Drive、Monitor、Printer、Smartphone、Tablet、Watch、WiFi、Wifi Offです。どれも MIT ライセンスのもと個人・商用プロジェクトで無料で使え、クレジット表記も必要ありません。

デバイスのアニメーションアイコンを React で使うには？

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

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

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