今回の仕上がり
WorkOSチームと作者の皆様が制作するRadix Iconsのcheckを、文字付きの確認ボタンに配置しました。15×15の同じSVGを15・30・45pxで表示し、拡大時の見え方も比べられます。
公式ページでcheckを探して保存する
公式ページのSearchへcheckを入力すると、Check Circled・Check・Checkboxが表示されました。「Download SVG」から公式ZIPの保存完了を確認し、その中のcheck.svgを使っています。npmのインストールやアカウント作成はしていません。
意味を文字でも伝える
ボタンではアイコンのaltを空にし、「内容を確認する」という文字で操作の意味を伝えています。押すと確認済みの表示に変わります。アイコンだけに頼る操作より、初めて見る人が押した後を想像しやすい作りを目指した例です。利用者テストを実施したという意味ではありません。
<button><img src="check.svg" width="15" height="15" alt="">内容を確認する</button>元のviewBoxは0 0 15 15です。縦と横を同じ倍率で変え、画像だけのクリック領域にせずボタン全体を押せるようにしています。細線の見え方は画面密度や倍率でも変わるため、15pxの設計を任意のサイズで完全に同じと考えないでください。
MITの表記を一緒に残す
公式のリポジトリとLICENSEを照合。MIT、Copyright (c) 2022 WorkOSを含む全文を作例とZIPへ同梱します。checkのパスは変更せず、保存時の末尾改行だけ整えています。
自作HTML・CSS・操作コードはCC0ですが、アイコンまでCC0に変更していません。ロゴカテゴリの商標利用や、全アイコンの見え方は今回の確認範囲外です。今回の検索・ZIP保存・作例表示は無料で行えました。最近のXでの人気や個人制作、AI利用は断定しません。確認日は2026年10月14日。