These fonts use formats such as OpenType and their design is based on grid and optimized for different sizes, they're usualy distributed in packs that include icons in different vector formats and come with OFL licenses that allow their free use directly as vector shapes or as embeded fonts, as long as they're not distributed and/or sold. Read this article about How to serve images for Retina Displays.īefore we go on to enumerate all these available resources, we propose these two very interesting articles: How to make your own icon webfont and Using Icon Web Fonts, an article about problems related to the use of these. The following example is a menu created with icon fonts: CSS3 Icon Animation Menu. You can see an online example provided by CSS-TRICKS about the use and possibilities of manipulation through CSS: Icon Fonts are Awesome. It's widely compatible with browsers, it even goes all the back to version 4.0 of IE. It reduces the time to create responsive design using scalable icons instead of different image files and media queries for every resolution. These custom icon sets embedded in a webfont kit can be easily styled with CSS changing colors, size, rotation, adding shadow and other new CSS3 features. We present to you an interesting and exciting selection of Free Icons, flat icons, symbols and pictograms with vectorial content, especially designed for UI design, menus, lists, webapps or native apps.On a different note, we've made a selection of the most recent Icon Webfonts designed specifically for responsive projects and to solve problems like graphics resolution in retina displays.

Website icon vector