多目的に使えるシンプルなデザインがいい！約800種類のアイテムが揃ったSVGのアイコン素材 -Glyph

Post on:2015年6月22日

sponsorsr

シンプルで種類が揃っているアイコンは、見つけるのが大変。
Webサイトやアプリなど、ビジネスからポートフォリオや個人ブログまで多目的に使えるさまざまなアイテムが揃ったシンプルなデザインのSVGのアイコン素材を紹介します。

タイトルは800種類だとキリがいいのですが、799種類なので約800種類で。

SVGアイコンをWebページに配置する方法

SVGアイコンを普通の画像のようにimgタグを使って配置します。

[html]

[/html]

SVGアイコンをエディタで開き、コードをコピペして配置します。右向きのアローだとこんな感じに。

[html]

[/html]

SVGアイコンを使う最も優雅な方法が、SVGスプライトです。
SVGスプライトファイルからアイコンを指定するために<use>を使用します。
※SVGスプライトのデモはダウンロードファイル（sample.html）に含まれています。

[html]

[/html]

SVGアイコンのサイズはスタイルシートで簡単に変更できます。

[css]
.glyp-icon svg {
width:16px;
height:16px;
}
[/css]

SVGアイコンのカラー変更は「color」ではなく「fill（塗り）」を使用します。

[css]
.si-glyph * {
fill: red;
}
[/css]

アイコンは多目的用にさまざまなアイテムが揃っています。

アイコン全799種類

ダウンロードは、下記ページのすぐ下「Download」からです。

アイコンの利用にあたっては個人でも商用でも無料、とのことです。詳しくはダウンロードファイルの「LICENSE」をご覧ください。