アイコンボタンとは

文字を持たず、アイコンだけで操作を示す小さなボタン。狭いスペースやツールバーで使う。

概要

文字のラベルを持たず、アイコンだけで何のボタンかを伝える部品です。ヘッダーの検索アイコンや、カード内の閉じるボタンのように、スペースが限られる場所でよく使われます。見た目から役割が伝わらない人（スクリーンリーダーの利用者など）のために、aria-label で操作の内容を必ずテキストとして補います。

別名

表記ゆれ：アイコンボタン、アイコンのみボタン、icon button

アイコンにテキストを添えないボタン全般を指す言葉で、丸型・角丸型など形状のバリエーションを問いません。

AI への伝え方

「ゴミ箱アイコンだけの削除ボタンを作って、aria-label は必ず付けて」のように、アイコンの種類と aria-label の必要性をセットで伝えます。ツールチップ（ホバーで説明を出す部品）は別項目なので、必要なら併用したい旨を分けて伝えます。

似たパーツとの違い

「ボタン」との違いはラベルの有無で、アイコンボタンは文字を持たない分、aria-label によるテキスト補完が欠かせません。「FAB」も見た目がアイコンボタンに近いですが、画面に固定表示される点と役割の重要度が異なります。

デモ

コード

HTML

<div class="icon-button-demo">
  <button class="icon-button-demo__btn" type="button" aria-label="検索する">
    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
      <circle cx="11" cy="11" r="7"></circle>
      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    </svg>
  </button>
  <button class="icon-button-demo__btn icon-button-demo__btn--danger" type="button" aria-label="削除する">
    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <polyline points="3 6 5 6 21 6"></polyline>
      <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
      <path d="M10 11v6"></path>
      <path d="M14 11v6"></path>
    </svg>
  </button>
</div>

CSS

.icon-button-demo {
  display: flex;
  gap: 12px;
}

.icon-button-demo__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  background: #fff;
  color: #0017c1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.icon-button-demo__btn:hover {
  background: #e6e6e6;
}

.icon-button-demo__btn:focus-visible {
  outline: 2px solid #0017c1;
  outline-offset: 2px;
}

.icon-button-demo__btn--danger {
  color: #b3261e;
}