English
简体中文
Español
Português (Brasil)
Deutsch
Français
한국어
Čeština
Tiếng Việt
Bahasa Indonesia
Türkçe
Русский300 個のアイコン · 20 カテゴリ
アニメーションアイコンのカテゴリ
useAnimations のアイコンは、ナビゲーションの矢印やメディア操作からローダー、SNS のロゴまで、どれも 1 つのカテゴリに属しています。カテゴリを開くと、そのアイコンの一覧、使いどころ、追加するためのコードが表示されます。インタラクションから探すこともできます。
- アラート5 個のアイコン警告の三角形、アラートの丸、停止標識のアイコンです。点滅するほど派手ではなく、それでも目に留まる程度にパルスします。入力エラーのあるフォーム項目の横、エラーバナーの先頭、ステータス列など、静止したアイコンだと読み飛ばされがちな場所に向いています。
- 通知4 個のアイコン新着があると揺れるベルと、ベルとミュート状態のベルを切り替えるアイコンです。ベルが軽く揺れることで未読件数に目が向き、切り替え型のアイコンはチャンネルやスレッドのミュートボタンとしてもそのまま使えます。
- ナビゲーション34 個のアイコン閉じるボタンに変形するハンバーガーメニューのほか、ホバーすると向いている方向へ少し動く矢印、シェブロン、斜め矢印があります。ドロワーを開く、前に戻る、行を展開する、サイトの外へ移動するなど、その操作がどこへつながるのかがひと目でわかります。
- アクション64 個のアイコン保存、削除、ダウンロード、更新、いいね、ブックマーク、検索、設定といった、インターフェースの「動詞」にあたるアイコンです。それぞれが対応するクリックやホバーに反応して操作を確かめさせてくれます。投稿にいいねするとハートが塗りつぶされ、削除する前にはゴミ箱のふたが持ち上がります。
- コンテンツ22 個のアイコンファイル、フォルダ、本、メール、添付ファイル、人物のアイコンです。ユーザーが扱う対象を示すのに使え、追加・削除・チェック付きのバリエーションを使えば、リストやチームの管理画面に手応えのある反応を持たせられます。
- フォーム3 個のアイコンチェック済みと未チェックの状態をアニメーションで切り替えるチェックボックス、ラジオボタン、トグルスイッチです。オンボーディングのチェックリストや設定画面など、素の input では味気ない場所で使えて、状態もひと目で読み取れます。
- メディア28 個のアイコン音声・動画プレーヤー向けの再生と一時停止、音量、マイク、カメラ、スキップ、シャッフルのアイコンです。切り替え型のアイコンは再生から一時停止、マイクからミュートのように 2 つの状態を行き来するので、ボタンは常に次のクリックで何が起きるかを示します。
- テキスト編集10 個のアイコンリッチテキストのツールバー向けの太字、斜体、下線、配置、リストのアイコンです。クリック時の短いアニメーションで書式が適用されたことを伝えられるので、テキスト自体の変化がわかりにくいエディターで役立ちます。
- コミュニケーション13 個のアイコン電話、チャットの吹き出し、送信ボタン、留守番電話、RSS のアイコンです。通話アイコンは着信・発信・不在着信・転送と通話履歴に必要な状態をそろえていて、送信アイコンはクリックするとメッセージを小さく送り出す動きを見せます。
- デバイス12 個のアイコンスマートフォン、タブレット、モニター、スマートウォッチ、プリンターと、Wi-Fi、Bluetooth、バッテリーといった接続まわりのインジケーターです。デバイスの選択、レスポンシブプレビューの切り替え、接続状態の表示に使えます。
- 天気16 個のアイコン太陽、月、雲、雨、雪、雷、風のアイコンで、天気予報や時間帯に合わせた表示に使えます。太陽と月はライトモードとダークモードの切り替えスイッチにもぴったりです。
- 地図・位置情報9 個のアイコンマップピン、ナビゲーション矢印、地球儀、ターゲット、錨のアイコンです。ホバーで落ちてくるピンは店舗検索や配送先住所を目立たせ、地球儀は言語や地域の切り替えに使えます。
- EC・ショッピング11 個のアイコンオンラインストア向けのショッピングカート、買い物袋、値札、ギフト、クレジットカード、配送トラックのアイコンです。カートに追加するアニメーションがあればトースト通知なしでもクリックが伝わり、トラックや荷物のアイコンは注文状況の表示にちょっとした動きを添えます。
- グラフ5 個のアイコンアクセス解析やレポート向けの棒グラフ、円グラフ、トレンド矢印のアイコンです。上昇・下降のトレンドアイコンを使えば指標が上がったのか下がったのかがひと目でわかるので、KPI カードや数値の推移を伝える更新履歴に合います。
- 開発9 個のアイコンコードの括弧、ターミナル、Git のブランチ、コミット、マージ、プルリクエストに加えて、サーバーとデータベースのアイコンがあります。Git やインフラの用語がそのまま UI に登場する開発者ツール、ドキュメントサイト、ステータスページ向けです。
- デザイン・レイアウト10 個のアイコンエディターやビルダー向けのグリッド、カラム、レイヤー、切り抜き、ペンツール、カーソルのアイコンです。コンテンツを配置する、グリッド表示とテーブル表示を切り替える、描画ツールを選ぶといった操作のツールバーに合います。
- 図形・数学8 個のアイコン円、正方形、三角形、六角形、八角形、割り算の記号です。描画アプリの図形ツール、電卓の演算子、図やオンボーディングの手順で使う主張しすぎない目印として使えます。
- ローディング5 個のアイコン処理が続いている間ずっとループするスピナーやローダーです。リクエスト中の送信ボタンの中、読み込み中のコンテンツの代わり、全画面のスプラッシュなどに置けます。ユーザーがモーション軽減を設定している場合は静止します。
- SNS22 個のアイコンSNS や、開発者・デザイナーが作品を共有するサービスのブランドアイコンです。X、Instagram、YouTube、Discord、Telegram、Figma などがあります。ホバーでアニメーションするので、フッターやプロフィールのリンクがクリックできることが伝わりやすくなります。
- その他10 個のアイコンほかの大きなグループに属さないアイコンです。フィードバック用の顔文字、コーヒーカップ、時計、脈拍の線、下へスクロールの合図があります。下へスクロールのアイコンは、ヒーローセクションで続きがあることを示す定番のヒントです。