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

メディアプレーヤーのアニメーションアイコン

音声・動画プレーヤー向けの再生と一時停止、音量、マイク、カメラ、スキップ、シャッフルのアイコンです。切り替え型のアイコンは再生から一時停止、マイクからミュートのように 2 つの状態を行き来するので、ボタンは常に次のクリックで何が起きるかを示します。

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

メディアのアイコン一覧

使いどころ

音声・動画プレーヤーの再生・一時停止ボタン
ビデオ通話のミュート・ミュート解除
ミーティングアプリのカメラのオン・オフ切り替え
スキップ、リピート、シャッフルなどのプレイリスト操作
キャストや AirPlay のボタン
ポッドキャスト・音楽アプリの操作ボタン

インタラクション別

ループするアニメーションアイコン · 1
常に再生し続けます。モーション軽減が有効な場合は静止した最初のフレームのままです。Airplay.
クリックで切り替わるアニメーションアイコン · 10
クリックで 2 つの状態を切り替えます。モーション軽減が有効な場合はアニメーションせずに即座に切り替わります。Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume.
クリックで動くアニメーションアイコン · 6
クリックするたびに最初から 1 回再生します。モーション軽減が有効な場合は再生しません。Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle.
ホバーで再生するアニメーションアイコン · 11
モーション軽減が有効でなければ、mouseenter で 1 回再生します。離れても止まらず、再生中にもう一度乗っても最初からにはなりません。Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV.

アプリに追加する

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

npm install react-useanimations

import UseAnimations from 'react-useanimations';
import playPause from 'react-useanimations/lib/playPause';

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

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

npx shadcn@latest add https://useanimations.com/r/play-pause.json

import { AnimatedPlayPause } from '@/components/animations/play-pause';

<AnimatedPlayPause size={24} />

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

よくある質問

メディアプレーヤーのアニメーションアイコンにはどんなアイコンがありますか？

28 個あります。Airplay、Aperture、Camera、Camera Off、Cast、Disc、Fast Forward、Film、Headphones、Mic Off、Microphone、Microphone V2 ほか 16 個です。どれも MIT ライセンスのもと個人・商用プロジェクトで無料で使え、クレジット表記も必要ありません。

メディアプレーヤーのアニメーションアイコンを React で使うには？

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

メディアプレーヤーのアニメーションアイコンは React なしでも使えますか？

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