本文へスキップ
JA

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

SNS のアニメーションアイコン

SNS や、開発者・デザイナーが作品を共有するサービスのブランドアイコンです。X、Instagram、YouTube、Discord、Telegram、Figma などがあります。ホバーでアニメーションするので、フッターやプロフィールのリンクがクリックできることが伝わりやすくなります。

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

SNS のアイコン一覧

使いどころ

  • サイトフッターの SNS リンク
  • ブログ記事のシェアボタン
  • 著者やチームメンバーのプロフィールリンク
  • チャットサーバーへのコミュニティ招待ボタン
  • SNS アカウントや開発者アカウントでのサインイン

インタラクション別

アプリに追加する

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

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

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

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

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

<AnimatedGithub size={24} />

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

よくある質問

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

22 個あります。Behance、Chrome、Codepen、Codesandbox、Discord、Dribbble、Facebook、Figma、Framer、Github、GitLab、Instagram ほか 10 個です。どれも MIT ライセンスのもと個人・商用プロジェクトで無料で使え、クレジット表記も必要ありません。

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

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

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

はい。各アイコンは https://useanimations.com/icons/<id>.json（例：https://useanimations.com/icons/github.json）にある Lottie JSON ファイルで、lottie-web、lottie-ios、lottie-android、Flutter の lottie パッケージで再生できます。静的 SVG は各アイコンのページ（英語）からダウンロードできます。Twitter は After Effects のエクスプレッションを使っているため、Web では lottie-web のフルビルドが必要です。