Glyph

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

Download Usage

Usage

  1. Download and copy the sprite.svg to a public folder of your project.
  2. Search for the icons, hover on the icon to copy snippet and paste into your HTML document*.
  3. You’re done. Now grab some coffee and style them!

(*): Maybe you have to change the relative path in the snippet according to where you put the sprite file in your project folder.

Styling the icons

If you want to customize the icons using CSS in webkit-based browsers and IE, you will need to include polyfill.js in your document. The polyfill forces Chrome, Safari and IE to treat the SVG inside <use> as inline SVG so we can style all the SVG elements easily.

Open sample.html or search and click on the icon to copy its snippet and insert to your 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>
Since Glyph is SVG with fluid size, we need to specify the icon size: 
.glyp-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;
}