Accessibility Now
Join our upcoming webinar about accessibility standards and legislation. May 19, 2022.
Blog

More about Vaadin Font Icons

By  
Jarmo Kemppainen
·
On Oct 1, 2015 8:36:00 AM
·

icons

Using icons is a quick and effective way to visually represent content on the web. Icons can also aesthetically improve a site’s or application’s visual look and feel. Having all the icons in one font file is a very handy way of working with icons in design applications. Font icons being basically vector graphics you can scale them to any size without losing sharpness. By attaching font icons to your front end you can also style their colour, size and even animate them with CSS. So as a web designer or application developer, who wouldn’t love using font icons?

Font Icons are Awesome!

The most famous and used font icon in web design is Font Awesome. Its popularity has however made it a bit too common and even a little bit boring. Vaadin Font Icons is a new and hopefully fresh competitor for Font Awesome. The most notable difference between the two is the icon’s appearance. Font Awesome icons have rounded corners and Vaadin Font Icons favour sharp edged corners. Both icon fonts are low detailed and silhouette symbols go well together with modern flat design. Simplified icons appear clearly even when used as smaller sizes, as shown in the comparison image below.

awesome

The smallest recommended Vaadin Font Icons font size is 16 pixels. They are designed for a 16 pixel grid and the crisp render results are acquired by using font sizes by multiples of 16 pixels, such as 16, 32, 48 and 64.

16 pix

Ligatures

As another addition, Vaadin Font Icons also support ligatures. A ligature is a special character that combines multiple characters. For example, if you are using Vaadin Icon Font and type the four letters h,o,m and e to form the word ‘home’. Ligature settings will automatically combine the characters h, o, m and e to a single word “home” which is depicted by the icon glyph for home. Ligatures are an effective way to handle icons in design applications and web design. Ligatures are meaningful words in a single character. Meaningful words work better for search engines and people who use text-to-speech.

ligatures

Keep in mind, however, that ligatures are not supported in IE 9 and older.

Icon design work process

First you have to have an idea for an icon. The idea is usually the hardest part of icon design. You have to design a simple yet recognizable shape for the item or action. Pen and paper sketches are a good starting point for drawing down different icon ideas. After finishing the icon idea, you need to draw the icon as a vector graphic. You can use vector programs such as: Adobe Illustrator, Bohemian Codings Sketch or Corel Draw. The main thing about vector graphic drawing applications is that you can use multiple artboards and export individual icons as SVG images. Creating vector paths you should avoid making unnecessary paths and keep the vector object as light as possible.

work in progress

After I have all the individual icons in SVG format, I then import the images to the Icomoon web application. I have to say that Icomoon is an outstanding tool for all who want to create their own icon fonts. Icomoon makes font creating fun and you can use it for free. If you want to have more premium features with cloud support, then you have to pay a small fee. If you want to learn more about Icomoon, go to the web site: www.icomoon.io.

Collection

The current version 1.0 of Vaadin Font Icons includes 530 unique icons. Vaadin Font Icons are designed for web applications and have been released under Creative Commons license so you can use it free of charge. We are going to add new icons to the collection and continue improving the Vaadin Font Icons site. Download or check out for more information about the Icons at vaadin.com/font-icons. I hope that you like the icons and find them a useful design asset.

Getting started

If you would like to have the Vaadin Font Icons running in your project then you can go to the Vaadin Font Icons site, download the icon files and see more use case examples: https://vaadin.com/font-icons/download You can also have Vaadin Font Icons as a Vaadin add-on https://vaadin.com/directory#!addon/vaadin-icons-add-on

GET VAADIN FONT ICONS

Jarmo Kemppainen
Jarmo Kemppainen, Vaadin designer. 15 years experience working as graphic and web designer. Recently my design work has been focused on UX.
Other posts by Jarmo Kemppainen