本文へスキップ
JA

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

コミュニケーションのアニメーションアイコン

電話、チャットの吹き出し、送信ボタン、留守番電話、RSS のアイコンです。通話アイコンは着信・発信・不在着信・転送と通話履歴に必要な状態をそろえていて、送信アイコンはクリックするとメッセージを小さく送り出す動きを見せます。

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

コミュニケーションのアイコン一覧

使いどころ

  • チャットやコメントフォームの送信ボタン
  • 着信・発信・不在着信を表示する通話履歴
  • お問い合わせ・サポートボタン
  • チャットウィジェットの起動ボタン
  • メンションやメールアドレスの入力欄

インタラクション別

アプリに追加する

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

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

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

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

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

<AnimatedSend size={24} />

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

よくある質問

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

13 個あります。At Sign、Message Circle、Message Square、Phone、Phone Call、Phone Forwarded、Phone Incoming、Phone Missed、Phone Off、Phone Outgoing、RSS、Send ほか 1 個です。どれも MIT ライセンスのもと個人・商用プロジェクトで無料で使え、クレジット表記も必要ありません。

コミュニケーションのアニメーションアイコンを React で使うには？

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

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

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