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.

Good news

In September we started working on new products. Now two new icon sets have been released: hand-drawn weather icons (Sunny Icons) and scary icons for Halloween (Spooky Icons).

Boogeyman Halloween icon — Spooky Icons


Releases

Sunny Icons — 90 hand-drawn weather icons

Spooky Icons — 100 hand-drawn Halloween vector icons


Freebies

Spooky Icons Free — 12 hand-drawn Halloween vector icons

Sunny Icons — Free Weather Icons


Articles

Our latest icon sets and Jolly UI have been recently featured in various blogs and magazines. Check out these articles, there’s more free and useful resources for designers to find!


Dribbble updates

We often update Dribbble with snippets and previews for the new products. There’re also some hand-drawn goodies and bespoke icons made for different projects across the web. Follow on!

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!

Icon Fonts on Hand Drawn Goods

What’s up, everyone! There’s been a while since our last post, so here is an update of what are we up to in Hand Drawn Goods.

There will be icon fonts

Currently we are working on icon font versions of our icon sets as well as developing new hand drawn products for our store. We have already released an icon font version of Jolly Icons along with Jolly Icons Ultimate set which includes all formats avaliable: PSD, AI, EPS, PNG, SVG + icon font (WOFF+EOT+SVG+TIFF and a CSS file).

Read more

Portfolio Items