Glyph

Icon font is so yesterday. Say hello to “Glyph”, a semantic and versatile SVG icon set designed for customization.

Download Usage

Usage

  1. Clone or download this repository.
  2. Copy the svgs you need or the sprite/sprite.svg to your project. Or you can generate a custom sprite file which contains only the icons you need
  3. Use one of the methods below to embed the icon in your design

Use an IMG tag

You can simply use an IMG tag, with src attribute pointing to the icon. 
<img src="svg/si-glyph-bed.svg"/>

Use the SVG icon web component

The SVG icon web component is a good solution if you want to style the icons with custom CSS. Include the .js file in your <head>, use the following HTML for each icon. 
<svg-icon><src href="svg/si-glyph-bed.svg"/></svg>
                    <!-- or use a sprite -->
<svg-icon><src href="sprite.svg#si-glyph-bed"/></svg>
Styling the icons
.glyph-icon svg {
width:16px;
height:16px;
}

You can set the icon in any width and height but we recommend to set the SVG in its base grid 16x16 (16x16, 32x32) to keep pixel perfection and sharpness.

Glyph is carefully handcoded with semantic naming so that you can change all or some icons color with just these simple CSS snippets below.

You can style the whole set with a single line of CSS:

.si-glyph * {
fill: red;
}

Targeting an individual icon is super easy:

.si-glyph-bubble-message-hi {
fill: blue;
}
Generate custom sprite
Please visit Glyph's github page for details.