Bootstrap Iconsの使い方｜pauseを保存し、文字付き一時停止ボタンに使う

文字と一緒に使うと、操作を伝えやすい

使用例を別画面で開く · SVG・ライセンス・出典のZIPを保存

「動かす」で1秒ごとに数が増え、「一時停止」で止まります。動画プレイヤーではありません。ボタンの意味と、実際に止まることを分けて確認するための小さな例です。

公式のpauseページから保存する

1. 公式のPause詳細ページを開く。
2. 「Download」を押し、pause.svgを保存する。「Copy HTML」はコードのコピーで、ファイル保存とは別。
3. 保存したSVGを開き、二本の縦線が表示されるか確かめる。
4. 下のライセンス全文も保存し、SVGと一緒に管理する。

今回使うのは一つのSVGです。フォント一式やnpmパッケージ、BootstrapのCSSを導入する手順ではありません。

アイコンだけに意味を任せない

<button type="button" id="pause">
  <img src="pause.svg" alt="" width="24" height="24">
  一時停止
</button>

文字が操作名を伝えるので、この例では画像のaltを空にし、同じ名前を二重に読ませないようにしています。ボタンはHTMLのbuttonを使い、クリックだけでなくキーボードからも押せます。アイコンを置くだけでは停止せず、別に停止処理が必要です。

保存したSVGの形と色指定は変更せず、元の16×16を24pxで表示しています。今回は黒い二本線を明るい背景へ置きました。別の配色で使う場合は、実際の画面で見えるか確かめてください。

MITの全文と出典を残す

公式リポジトリのライセンスはMITです。商用利用や変更を含む利用が認められる一方、コピーや実質的な部分には著作権表示と許諾文を含める条件があります。「無料だから出典資料を捨ててよい」という扱いにはしません。

配布ZIPにはpause.svg、LICENSE.txt、ATTRIBUTION.txtを同梱しました。著作権表記は公式のCopyright (c) 2019-2024 The Bootstrap Authorsを保持しています。保存したMIT全文と公式のライセンスを確認できます。

2026年10月10日に公式からの保存、アイコン表示、カウンターの停止、キーボード操作、ZIPの保存を確認。390px幅でも横にはみ出さないことを確認しました。スマホ実機、アイコン全点、フォント版は未検証です。X検索は取得できず、最近の反響や個人開発作品だという裏付けには使っていません。

線画の別候補はIconoir、形式の違いはSVGとPNGの拡大比較へ。形だけでなく、用途と条件を見比べて選べます。