Using glyphs for your icons

Flat design have seemingly become the trend of every designer. Even larger companies like Google and Microsoft have followed this. One element of this revolution is use of monochromatic icons and symbols. The increasing releases of various high resolution devices to the market converting icons into JPEGs, PNGs, GIFs and to SVGs have become less effective, time consuming and give scalability issues.

Possibility of size variation of Glyphs without rasterization

However Glyphs/ Web font allow you to get rid of scalability and rasterization concerns and thus, keep resolution independence for your icons and it can instantly be customized (size,color,drop shadow) with the control of CSS. Each Glyph icons represented by Unicode which can be used to represent via content attribute in CSS. Below is an example of using Glyph icon using FontAwesome library. 

HTML:

<i class="fa fa-refresh"></i>

CSS:
.fa {
   display:inline-block;
   font: normal normal normal 14px/1 FontAwesome;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
}

.fa-refresh:before {
   content: "\f021";
}


RESULT:

Following are open source Glyph libraries I personally used, you can use them for commercial projects, open-source projects or simply whatever you want. 

http://fortawesome.github.io/Font-Awesome/license/
http://glyphsearch.com/

If you are still not satisfied with the open source glyphs why not create your own.

https://glyphsapp.com/tutorials/creating-an-icon-webfont

Have fun with your web fonts! See you soon!