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.
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.
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.
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.
