Posts

Icon Fonts update and hand-drawn SVG icons

This week we updated all the icon font sets. Jolly Icons Font, Busy Icons Font, Brainy Icons Font, Friendly Icons Font and Jolly Icons Free Font are refactored and enhanced. Ultimate icon sets also include updated versions of the font.

What’s new?

Icons from one set are now included into one font file for easy reference. Font glyphs start with U+21 codes (Basic Latin) of Unicode. Font is referenced through a class named after the icon set:

.brainy {
	font-family: 'brainy-icons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

Each icon is referenced with .hdg- prefix:

.hdg-school:before {
	content: "\22";
}

HTML demo with a font test-drive block and a CSS file with @font-face are included as usual, though they are standardized and refactored.

Hand-drawn SVG icons

We had SVG source files included into the icon sets since the very first version. However using SVG icons on their own (without converting them into an icon font) becomes more common on the web due to solid browser support of SVG. The only problem browsers are IE8 and earlier versions, Opera Mini and Android 2.3 and earlier versions. But various progressive enhancement techniques can be implemented to help with it.

SVG icons are great because they are also scalable and look awesome on retina displays, and they also give you design control, are interactivity-friendly and can be manipulated with filters.

That’s why we started providing optimized SVG files. All SVG icons are processed with NodeJS SVG optimizer (github.com/svg/svgo). Here’s the code for a coffee icon from Jolly Icons Free Font (if you see an image here, look at the page source):

We also include svg-defs file for referencing icons with an ID, and a demo SVG sprite.

View updated icon sets

There’s a comprehensive table in the bottom of the Store page that describes all the differences between icon product versions: icon set, icon font and ultimate icon set.