今回の仕上がりは、こんな感じ
保存したdownloadアイコンを、「SVGとライセンスを保存」という文字の左へ置きました。アイコンは24×24、線の太さ2、色は#96efd4。背景と文章は編集部が作っています。
保存したSVGは365バイトでした。作例のボタンからは、今回使ったSVGとMITの著作権・許諾表示をまとめたZIPを保存できます。展開して、再利用するときもLICENSE.txtを保持してください。アイコンは静止画です。
アイコンを検索して、色を変えて保存する
- Feather公式サイトを開き、検索欄へ
downloadと入力します。 - 今回は
downloadとdownload-cloudが表示されました。クラウドの形が付いていないdownloadを使います。 - 「Color」の入力欄へ
#96efd4を入れます。「Size」を24、「Stroke width」を2にします。 downloadのカードを押すと、SVGの保存が始まります。今回のファイル名はdownload.svgでした。- ダウンロード一覧と保存先を確認し、SVGをブラウザで開きます。矢印が選んだ色で表示されれば成功です。
日本語の「保存」で見つからない場合は、downloadなどの英語名でも探してみてください。今回、アカウント作成や課金は不要でした。PNGへの変換や一括ダウンロードは試していません。
アイコンを置いたのに、保存されないのはなぜ？
SVGは絵なので、置くだけでは動作しません。作例では同じサイトのZIPへリンクし、download属性を付けました。SVGとライセンスを一緒に渡すためのZIPです。アイコンと文字を同じリンクの中に入れるので、両方を押せます。
<a href="feather-download.zip" download="feather-download.zip">
<img src="download.svg" alt="" width="24" height="24">
SVGとライセンスを保存
</a>このコードでは文字が動作を説明するので、アイコンのaltは空にしています。アイコンだけのボタンにする場合は、別途「保存」などの分かる名前が必要です。ファイルが開くだけになる場合は、リンク先と同一サイトか、ブラウザの保存動作、サーバーの設定を確かめてください。
スマホでも文字を押しやすくし、キーボード操作ではフォーカスの枠を見えるようにしました。似た線画素材のLucideやHeroiconsも紹介しています。混ぜて使うときは線の太さと大きさをそろえると、UIがばらばらに見えにくくなります。
無料で商用利用できる？ 表記は必要？
2026年10月5日に公式リポジトリで確認したライセンスはMITです。商用を含む利用・変更・配布が認められますが、著作権表示と許諾表示をコピーなどに保持する条件があります。「無料だから無条件」ではありません。今回はCopyright (c) 2013-2023 Cole Bemisを含む原文を、作例と同じ場所へ保存しました。
配布用データにはLICENSE.txtも含めてください。今回の表示・ダウンロード用ファイルにもライセンス全文を添えています。公式の最新の原文も確認してください。
確認したこと・していないこと
PCで検索、色変更、個別SVGの保存、保存ファイルの表示、文字付きリンクからのダウンロードを確認しました。この記事と自作リンクはPC・スマホ表示の確認対象ですが、Feather公式サイトでのスマホ保存、全アイコン、外部アプリへの読み込みは未検証です。
発見の参考にしたX投稿は2020年11月19日の第三者による一覧です。作者の発表でも最近の流行の証拠でもないため、話題性とは分けて紹介しています。