7 principles of icon design to create professional kits

In one of the sections of our blog, you can find and download free icons grouped by dozens of different themes and styles. And today we decided to share with you some useful tips for creating your own materials. By analogy with the article about the main types of user interface buttons, we think it will be useful for you to look at the most important quality attributes and key characteristics of icon design: conciseness, readability, simplicity, alignment, etc. (7 pieces in total).

Unlike the note with lessons for beginners to draw, the current post has a slightly more theoretical bias, but all the principles and explanations discussed are tied to real existing examples. In general, a thoughtful approach, a trained eye, step-by-step iteration, and a lot of practice will come in handy to successfully complete this task. The post is a translation of this note.

Definition

The main task of this or that icon is to quickly transmit information.

Prius Prime dashboard

Do you understand all the icons in the picture above? Experienced drivers with experience, of course, remember them, but some options here are extremely illogical – to understand them you will have to read the manual to decipher the corresponding values.

The clarity of these symbols is scaled down as follows:

It is difficult to understand an icon that uses an unfamiliar meaning. The seatbelt warning light (3rd from the left) is quite obvious. The electric control system icon (far right) is more confusing.

Overly sophisticated images can sometimes be annoying. And if you are driving, such a misunderstanding of the indicators becomes generally dangerous.

Here are some good examples available to everyone: a heart-shaped love symbol, a warning, a musical key, and a direction indicator:

The arrow is an important and most popular sign in the navigation system:

The most successful icons are understandable not only for a certain group of knowledgeable people, they become universal for different social populations, cultures and ages… Analyze your target audience and choose images and colors that resonate with her. For example, it makes sense that this site uses game images to indicate the types of games available on the sites.

Keep in mind that a single icon by itself may sometimes not be the best solution, especially if it presents an overly global / abstract idea. In this case, support the icon with a text description or find another solution.

Readability

If you can come up with a simple, understandable image, you need to make sure that this symbol is as readable as possible.

Many Amtrak users will find it difficult to decipher the station icon (the very first one), since it was made quite small. Transit has a similar problem – their “schedule” has too little distance between folder and clip images:

A small tweak significantly improves the situation (the clamping indent is increased below):

When working with multiple fragments / objects within an icon, be sure to leave space between them. Thin lines (and the more there are) make the drawing heavier and harder to decipher.

The authors of Google Maps have done an excellent job in this direction – all characters are readable even on a small screen size:

Alignment

For a balanced appearance of the icon, you may need to do the optical alignment of its elements.

Even though the triangle is in the center of the circle in the example above, the human eye sees it slightly off to the side. The thing is that the wider part of the triangle is more massive than the vertex, so it visually “drags” it to the left.

Similarly to how typography workers make minor edits to the type structure in order to create an optical illusion of balance (dots go beyond the center above the letters “i” and “j”, and the letter “O” goes slightly beyond the boundaries):

Likewise, icon designers make similar adjustments to get a balanced image in the end. To correct the position of the triangle from the previous example, move it a little:

Conclusion: don t be guided by numbers alone, trust your eyes.

Conciseness

An idea expressed in just a few words is effective and elegant. Here s the phrase:

By teaching others what you know, you deepen your understanding of the topic.

However, literally the same can be said in a succinct manner:

When one is teaching, two are learning.

Nice and capacious!

The Material service clearly demonstrates this principle in its usability documentation. Instead of using:

There is a simpler version of the icon for the site:

Brevity is essential when creating icons, because very often you have to work with small screens. Try to choose the right amount of details for your drawing, do not overuse them in vain.

In UIs with minimal design, content comes first, not presentation. Telegram messenger icons are clear and neat:

In some cases, the interface requires a more colorful illustration style. For example, the detailed icons on the Yelp website are a great way to showcase popular food / restaurant searches. The shrimp featured on the Thai food icon is simply delicious:

As for the icons for various programs, here a certain degree of detail gives the object a little more depth or color. Since users mainly observe these pictures on phone screens, toolbars, in app stores, they can be made more expressive and vivid, reflecting the essence of a particular brand or product.

Consistency (consistency)

To make the entire collection of icons look harmonious, you need to adhere to a single style when creating it. Before the arrival of the iOS 13 operating system, Apple icons contained symbols with different line widths, sizes and fillings:

Take a look at the example above. Do some objects look heavier than others?

Each of the archive icons has a certain “visual weight”, which can be determined by the following parameters: shape, size, fullness and thickness of strokes. Using the same characteristics within the same icon collection ensures its integrity.

Apple recently tweaked its design and introduced SF Symbols, a great addition to the San Francisco font. SF Symbols gravitates towards a more graphical style. Includes several different options for the implementation of certain symbols. Moreover, from icon to icon, their outlines and fillings have become much more harmonious.

Maintaining consistency in a large collection of icons is not an easy task, especially if several authors are working on it. The basic rules must be strictly followed.

The Phosphor set contains over 700 elements. Despite the fact that each symbol has an individual shape, they all equally “weigh” and go well with each other:

Individuality

All professional icon archives have their own character. What makes it unique? How does he characterize the brand? What mood does it convey?

Everyone s favorite Waze interface relies on design. Their colored volumetric images are very bizarre.

Twitter icons are soft, lightweight and crisp:

Pictures from the Sketch editor are exquisite and airy (visually reminiscent of colorful Icojam icons):

Freemojis emoticons are simply adorable:

Matching collections for Android bring a wide variety of moods to your screen. Here is abstraction, pixels, bubbles, and neon:

Ease of use

Even if you have perfected the design of the icons in the collection, the work does not end there. The next stage is testing and preparation for launch. Now we need to figure out if it will be easy for other professionals to create new icons for the set, if designers can easily and naturally use materials for their tasks (applications, printouts, etc.). A quality project is very well documented, thoroughly tested, and efficiently organized.

Organization

Keep the main file clean / tidy, give the elements clear names and place them so that you can easily find them. Decide on how to organize your objects: alphabetical order, size or file type?

Documenting

Formulate the key points of your icon library.

For example, consider the principles of Phosphor:

• Definition. Everything should be clear, symbols are readable and recognizable. Whatever you want to showcase, never sacrifice image clarity.
• Laconicism. Use as few details as possible. The Phosphor style is very simple. Each line should carry a certain meaning.
• Individuality. Show originality. Add some unique touches to refresh the picture.

List of technical requirements for it:

• Element size 48 × 48 pixels.
• Center alignment 1.5px.
• Rounded ends.
• Draw solid lines (since broken lines are usually difficult to read).
• Use straight elements, perfect arcs, and 15 ° angle increments.
• Adjust the curves as needed.

Make the documentation publicly available online whenever possible.

Testing

Check the consistency of the elements with each other. Make sure the icons look good in context and at appropriate sizes. To test the basic principles of icon design (legibility, alignment, conciseness, readability, and consistency), arrange them side by side.

Tools

And if you have the opportunity, implement additional tools / services to simplify the work with your set. So, Material icons are easy to use thanks to a special online library. It allows you to easily find the object you need, load different skins (styles), choose formats, as well as colors and sizes of materials:

Although the creators of the Font Awesome collection neglected some principles, they made their icons as accessible as possible for ordinary users. They offered several methods of working: using a library, CDN, icon font, and SVG. Another cool tool here is public discussion, which helps to determine the most demanded objects for implementation + information about those that are still in the development process.

Overall, a quality icon set is a very serious and challenging project. You need to approach work with love, professionalism and follow all the important principles of their creation. Then you can create a product that is in demand by other designers, which will develop and grow in the future.