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.

Release: hand-drawn icon fonts

All of hand-drawn icon fonts are now avaliable as single products: Jolly Icons Font, Brainy Icons Font, Busy Icons Font and Friendly Icons Font.

New icon fonts

Jolly Icons Font includes 400 characters from the following categories: web, interfaces, technology, multimedia, weather, social networks, communication, e-commerce, food, leisure, etc.

Friendly Icons Font (160 icons) features social networks, apps, platforms, messengers, cloud services, sharing tools and interface elements.

Busy Icons Font provides 340 characters related to business, management, HR, investments, startups, marketing, time management and productivity, strategy, e-commerce and interface elements.

Brainy Icons Font is a science and education icon font perfect for projects related to illustrating science concepts and ideas, school, university, laboratory, thinking, math, space, technology, various abstract concepts and education.

 

Hand-drawn icon font formats

 

Icon font formats

They include icon font formats (TTF, WOFF, SVG, EOT) with a @font-face CSS file with all classes and character mappings.. For those who would prefer to generate a custom social icon font using only those icon glyphs that are needed for your project — we included source file for each icon in SVG format. You can easily generate custom font using SVG vector source files in one of the web font generators, such as icomoon.com orfontello.com. This will reduce site load time with no quality loss and bust the performance even more!

Free icon font — Jolly Icons Free Font

Jolly Icons Free Font – hand-drawn free icon font

There’s also a free icon font Jolly Icons Free Font. It’s based on the free set of 36 hand-drawn icons Jolly Icons Free and is avaliable for download!

Release: ultimate hand-drawn icon sets

Each of the regular hand-drawn icon sets has now an extended version: Jolly Icons Ultimate, Busy Icons Ultimate, Brainy Icons Ultimate and Friendly Icons Ultimate.

New file formats

In an addition to 4 file formats, ultimate icon sets include icon font formats to make it easier to use the icons on web pages. Icon font is provided in TTF, EOT, SVG, WOFF formats along with a CSS file with all classes and character mappings.

Hand Drawn Icons (Vector Sources + Icon Font)

We also provide separate vector source files for each icon in SVG format. It allows you to use any icons of your choice to generate a custom icon font in a font generator apps, such as fontello.com or icomoon.com.

Portfolio Items