Webサイト制作時にアイコンがほしい時があるかと思いますが、今回はそんな時、SVG形式のアイコンをカスタマイズしてダウンロードできるサイト、ICONSVGのご紹介です。

アイコンのデザインはとてもシンプルで、様々な場面に使いやすいデザインになっているかと思います。アイコンのサイズやカラー、線の太さの調整、パスの端やつなぎ目の形状のカスタマイズがWebサイト上ででき、SVGファイルやSVGコードでダウンロードできます。

ICONSVG Webサイトへ

ICONSVGの使い方

ICONSVGの使い方はとてもシンプルです。下記にカスタマイズ方法を記載します。

ICONSVG Home画面

①背景色の指定

背景をホワイトとブラックから選択します。 右上の丸いホワイトとブラックのアイコンをクリックすると背景色が変更できます。

背景色の指定

②アイコンサイズの指定

Icon sizeのスライダーを使って、アイコンのサイズを指定できます。最小16pxから最大100pxまで自由に指定できます。

アイコンサイズの指定

③アイコンの線幅指定

Stroke widthでアイコンの線幅を指定できます。最小1pxから最大4pxまで指定ができます。

アイコンの線幅指定

④アイコンのカラー指定

Stroke colorでアイコンのカラーを指定できます。カラーピッカーで自由に設定できます。

アイコンの色指定

⑤アイコンのパスの形状を指定

Endsでパスの端、Joinsでパスのつなぎ目の形状をカスタマイズできます。それぞれ3種類ありますので、好きな形状を指定してください。

アイコンのパス形状カスタマイズ

SVGをダウンロード

カスタマイズしたアイコンをSVG形式のファイルか、SVGコードでダウンロードできます。どちらでも使いやすい方でダウンロードしてください。

SVGダウンロード

まとめ

簡単な手順でアイコンをカスタマイズでき、ダウンロードして使うことができます。アイコン使用のライセンスについてですが、MITライセンスということで、個人的および商業的なプロジェクトで使用しても無料のようです。このようなアイコン素材を無料で公開していただいている作者様には頭の下がる思いですね。