本文へスキップ
JA

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

開発者向けのアニメーションアイコン

コードの括弧、ターミナル、Git のブランチ、コミット、マージ、プルリクエストに加えて、サーバーとデータベースのアイコンがあります。Git やインフラの用語がそのまま UI に登場する開発者ツール、ドキュメントサイト、ステータスページ向けです。

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

開発のアイコン一覧

使いどころ

  • 開発者ツールでのプルリクエスト・マージ・ブランチの状態
  • ドキュメントのコードスニペット・埋め込みボタン
  • ランディングページのターミナル・CLI セクション
  • ステータスページでのサーバー・データベースの稼働状況
  • Command キーを使ったキーボードショートカットのヒント

インタラクション別

アプリに追加する

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/git-branch.json
import { AnimatedGitBranch } from '@/components/animations/git-branch';

<AnimatedGitBranch size={24} />

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

よくある質問

開発者向けのアニメーションアイコンにはどんなアイコンがありますか？

9 個あります。Code、Command、Database、Git Branch、Git Commit、Git Merge、Git Pull Request、Server、Terminalです。どれも MIT ライセンスのもと個人・商用プロジェクトで無料で使え、クレジット表記も必要ありません。

開発者向けのアニメーションアイコンを React で使うには？

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

開発者向けのアニメーションアイコンは React なしでも使えますか？

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