今回の仕上がりは、こんな感じ
保存したSVGを32pxで配置した「ゲームを探す」リンクです。画像だけに意味を任せず、行き先を文字で添えています。アイコンはLucide、文章と配置は編集部の使用例です。
文字付きリンクを実際に試す ↗ · SVGとライセンスをまとめて保存 · ライセンスと表記を読む
保存ファイルは679バイト。幅・高さは24、viewBoxは0 0 24 24、線幅は2、色は#43d9ffでした。拡大した使用例でも、形を確認できます。
検索してSVGを保存する
1. 名前で探す
公式アイコン一覧の検索欄へgamepadと入れ、「gamepad-2」を選びます。公式詳細には貢献者のリンクもあるので、利用条件と一緒に確認してください。
2. 色を変える
左の「Customizer」で「Color」の入力欄へ#43d9ffを入れます。今回は「Stroke width」は2px、「Size」は24pxのままにしました。プレビューが水色へ変わったことを確認してから保存します。
3. 「Download SVG」を選ぶ
「Copy SVG」の右の下向きメニューを開き、「Download SVG」を選びます。主ボタンの表示も「Download SVG」へ変わるので、そのボタンを押して保存します。今回はDownloadsにgamepad-2.svgができ、設定した色もファイルに残っていました。PNGやJSXの書き出しは今回試していません。
文字と一緒に配置する
この使用例では、リンクの文字が意味を伝えているので、装飾アイコンのaltは空にしました。アイコンだけのボタンにするなら、別途その操作が分かる名前を付ける必要があります。
<a href="/browser-games">
<img src="./gamepad-2.svg"
width="32" height="32" alt="">
ゲームを探す
</a>一つのSVGを保存して置くだけなら、React用パッケージの追加は不要です。アイコンを別の素材集と混ぜるときは、線の太さや大きさを見比べてください。今回は一つのリンクへの配置だけを確認しており、すべてのアイコンの見え方を検証したわけではありません。
利用条件と確認範囲
公式ライセンスはISCです。使用・複製・変更・配布が許可され、有料・無料を問いません。コピーには著作権表示と許諾文を残す条件があるため、掲載ファイルの隣にLICENSE.txtを置きました。
Lucideの一部はFeather由来で、公式ページに対象名とMITライセンスが載っています。今回のgamepad-2はその一覧には含まれていません。別のアイコンを保存するときは、同じ条件だと決めつけず、公式の一覧と表示を確認してください。
2026年10月4日、PCのサイドブラウザで検索、色変更、SVG保存を行い、保存ファイルを使ったリンクの表示と移動を確認しました。この操作では登録や支払いは不要でした。公式ツールの実機スマホ操作、Figmaなど外部アプリへの取り込み、PNG・JSXの出力は未確認です。今回の選定は公式の配布情報に基づいており、Xでの反響を理由にしていません。