Charm Iconsの使い方｜検索とクリアのSVGを文字付きボタンへ

今回の仕上がり

虫眼鏡と×のアイコンを、絞り込み・条件消去の文字付きボタンに添えました。SVGだけで意味を伝えず、「絞り込む」「条件を消す」という文字を残した自作の使用例です。

Charmの検索と×アイコンを文字付きボタンへ配置し、架空の作品名3件を表示した自作例の実画面 — 編集部の自作例。外部の作品検索ではなく、配布HTML内の3件を絞り込みます。タップして拡大できます。

「星」で絞ると1件、「条件を消す」で3件へ戻ります。見つからない文字では0件と表示されます。画像は公式のsearch.svg・cross.svgを変更せず、表示サイズだけ32×32pxにしています。

SVGを保存して使う

公式リポジトリのiconsフォルダからsearch.svgとcross.svgを開きます。
元ファイルのURLを確認して保存します。今回はこちらで取得した公式原本をZIPに入れました。
example.htmlと同じフォルダに置き、imgのsrcへファイル名を指定します。
文字付きボタンの画像には空のaltを指定します。操作名はボタンの文字から伝わります。
作品名に「星」を入れて「絞り込む」を押し、続いて「条件を消す」を試します。

<button type="submit">
  <img src="search.svg" alt="" width="32" height="32">
  絞り込む
</button>

公式GitHubでsearch.svgの配布ファイルを開いた実画面 — 公式配布ファイルの確認画面。サイトの一括ダウンロードUIを使った確認ではありません。タップして拡大できます。

利用条件と表示の注意

公式MITライセンス全文には2021 Jay Neweyの著作権表記があります。使用・改変・再配布・商用利用が認められる一方、コピーや相当部分には著作権表記と許諾文を含める条件があります。今回のZIPにも全文を同梱しています。素材そのものを編集部が作ったとは表示しません。

2枚のSVGのviewBoxは0 0 16 16です。今回はimgで配置しているため、親ボタンの文字色を変えてもSVG内のcurrentColorへ自動で伝わるわけではありません。明暗どちらでも見えるよう、画像の背後を白にした作例です。色の連動を試す場合はSVGの置き方とcurrentColorを確認してください。

2026年10月21日、公式原本の取得と表示、PC・375px幅の明暗で絞り込みと条件消去を確認しました。スマホ実機・全アイコンの可読性・全ブラウザは未確認です。最近の作者X投稿は未調査です。自作HTML・CSS・JavaScriptはCC0、SVGはJay Newey様のMITとして区別しています。