アイコンを探す手間がなくなる！30種類の有名どこ全9,769個のSVGアイコンを一元管理・一行で簡単に利用できる -We Love SVG

Webページに外部スクリプトを一行記述するだけで、Font Awesome, Entypo, Icons8など、人気が高いアイコンセットの9,769種類のSVGアイコンを簡単に利用できるWeb Love SVGを紹介します。

We Love SVG
We Love SVG -GitHub

• We Love SVGの使い方
• 利用できるSVGアイコンは9,769種類
• SVGアイコンのカスタマイズ

We Love SVGの使い方

利用できるアイコンセットは、30種類。
すべて個人でも商用でも無料利用できます。

We Love SVGで利用できるアイコンセット一覧

例えば一つ目の「Flat Color」だと、こんな感じのかわいいアイコンが揃っています。

Flat Color

使い方は、簡単です。

Step 1: 外部ファイル

外部ファイルにjquery.jsを使用している場合は、下記の外部スクリプトを加えます。

<script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/jquery-webicon.min.js"></script>

AngularJSバージョンも用意されています。

<script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/angular-webicon.min.js"></script>

Step 2: HTML

あとは、使用するアイコンのコードを書くだけです。
アイコンをクリックするとコードが表示されるので、それをコピペして利用します。

アイコン用のHTML

右向きアローのコードは、こんな感じ。

<webicon icon="fa:arrow-right"/>

利用できるSVGアイコンは9,769種類

アイコンパックの中身を少し見てみましょう。
※ライセンスは各パックごとに異なります。クレジットの有無が異なるくらいでしょうか。

Flat Color

Win 10

Font Awesome

Material

Entypo

SVGアイコンのカスタマイズ

SVGアイコンは、コードベースで簡単にカスタマイズできます。

webiconのカスタマイズ

SVGアイコンのカラーを変更するコード。

<webicon icon="fa:github-square" style="color: #1fa67a;"></webicon>