多目的に使えるシンプルなデザインがいい！約800種類のアイテムが揃ったSVGのアイコン素材 -Glyph
Post on:2015年6月22日
sponsors
シンプルで種類が揃っているアイコンは、見つけるのが大変。
Webサイトやアプリなど、ビジネスからポートフォリオや個人ブログまで多目的に使えるさまざまなアイテムが揃ったシンプルなデザインのSVGのアイコン素材を紹介します。
タイトルは800種類だとキリがいいのですが、799種類なので約800種類で。
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」からです。
アイコンの利用にあたっては個人でも商用でも無料、とのことです。詳しくはダウンロードファイルの「LICENSE」をご覧ください。
sponsors
