[ 目次 ]

• はじめに
• SVGのブラウザ対応状況（2018年12月時点）
• FLATICON
• ICONBOX
• Orion Icon Library
• Clarity Icons
• Icons
• 最後に

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

私はエンジニアなのでアイコンが作れません・・・（作れるようにデザイン勉強しろよ！っという話もあります）
そんなエンジニア向けに無料でSVGアイコンを提供してくれるサービスを探してまとめてみたいと思います。
（今後画像のフォーマットは軽量なwebpやSVGが多くなってくることが想定されます。まずは、SVGから調べていきたいと思います）

なぜそのように思ったかというと、fontawesome に頼りっきりのアイコン事情を打開したいと思ったからです。
本ブログもfontawesome 5を利用していますが、１０種類もアイコンを利用していないにも関わらず、全てのアイコン要素を読み込んでいるのはリソースの無駄です。読み込みのパフォーマンスにも少なからず影響はでます。
必要なアイコンだけSVGで読み込もうと思ったことがきっかけでもあります。

SVGのブラウザ対応状況（2018年12月時点）

Can I use でSVGの対応状況をみてみましょう。

Usageが 95.64% で多くのブラウザが対応していることがわかります。IEでも利用できますね。
何年も前のPCを利用し続けている企業とかでない限り特に問題にならなそうです。

FLATICON

とりあえず数が豊富。ユーザー登録をすることでブラウザ上から編集もできるようです。

flaticon

ICONBOX

国産のSVGアイコンになります。日本人のクリエイターが作成しているようです。

iconbox

https://coliss.com/articles/freebies/free-icons-iconbox.html
こちらのcoliss記事で紹介もされています。

Orion Icon Library

4500種類以上と数も豊富で、カスタマイズも可能です。

Orion Icon Library

https://coliss.com/articles/freebies/svg-icon-library-orion.html
こちらのcoliss記事で紹介もされています。

Clarity Icons

badgeやalertをiconに追加したりカスタマイズも可能です。

Clarity Icons

Icons

種類が豊富で良い。ただ、検索していると有料のものもあるので注意

Icons

最後に

今回はSVGのアイコンについて調べてみました。
自分で作れるようになるのが一番いいと思うのですが、そこまで達するにも時間がかかります。
既にあるサービスを有効活用することから始めてみましょう。
また、無料でSVGアイコンを提供している、作成できるサービスは引き続き調べていきたいと思います。