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

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

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

サイトのキャプチャ

Glyph
Glyph -GitHub

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

SVGアイコンをimgタグで配置

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

<img src="svg/si-glyph-bicycle-man.svg">

SVGアイコンをインラインで配置

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

<svg viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="si-glyph si-glyph-arrow-thick-right">
	<path d="M16.818,7.646 L10.878,2.206 C10.644,1.992 10.264,1.993 10.029,2.208 L10.024,6.001 L2,6.001 C1.447,6.001 1,6.448 1,7.001 L1,9.001 C1,9.554 1.447,10.001 2,10.001 L10.019,10.001 L10.013,13.878 C10.245,14.091 10.626,14.09 10.862,13.875 L16.816,8.423 C17.049,8.206 17.052,7.859 16.818,7.646 L16.818,7.646 Z" fill="#434343" class="si-glyph-fill"></path>
</svg>

SVGアイコンをSVGスプライトで配置

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

<div class="glyph-icon"><svg xmlns="http://www.w3.org/2000/svg" class="si-glyph-bubble-message-hi">
<use xlink:href="sprite.svg#si-glyph-bubble-message-hi" />
</svg></div>

SVGアイコンのサイズやカラーを変更

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

.glyp-icon svg {
width:16px;
height:16px;
}

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

.si-glyph * {
fill: red;
}

Glyphアイコン799種類とダウンロード方法

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

アイコンのキャプチャ

アイコン全799種類

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

サイトのキャプチャ

Glyph

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

top of page

©2017 coliss