It is rightly said that a design is all about how it works. Having said that, a good design stands out only if it is well communicated through visualization. Following conventional practices can help designers to target their audience efficiently. It is observed that more than 95% of the users are attracted more towards the designs which are well portrayed through elements, rather than just by data. This is because elements help to reduce the cognitive load for users and increases the likelihood that they will complete their task successfully, exemplified by the likes of video streaming, animations, and presentations. In fact, viewers may glide through the website or the app to see if there are any elements that will capture their interest before they even decide to read it.

​

Now, the main concern of the designers is how to make it happen? The viable elements which capture the user’s interest are icons.

​

An icon is a symbol or a common visual language that effectively bridges language gaps. Using icons can help to depict an idea or meaning of possible actions. Using icons in a design has a lot of advantages: they provide visual interest, save space, present excellent targets for taps or clicks, and also provide quick recognition if they hold universal meaning. The challenge is that truly universal icons are rare, and icons often mean different things to different people. While relying on icons to convey information can help to simplify the user interface, it can also make it harder to perform tasks or find information. Having said that, it is important to test and refine your work, as it is not always the case that icons will fix the UX problems. This is especially true if the icons aren’t immediately recognizable to users, who do not have a wide spectrum of knowledge and experience.

​

Another perplexing factor is that similar icons may be used to represent different actions or information, sometimes in complete opposition from one product or service to another. There is no standardization for icons which makes it difficult for designers to rely solely on them. For instance, the ‘heart’ and ‘star’ icons typically indicate the ability to bookmark or potentially save a certain thing, and at times, to rate something or depict that a certain item is featured. Not only does the meaning and functionality of these two icons vary across different products or services, but they may also often compete with each other. This results in a lot of confusion or cognitive load for users as it is hard to interpret the meaning of icons precisely.

​

​

​

​

​

​

​

​

​

​

​

​

​

Contextual clues can help users to identify the options which are open to them and the relevance of the information available to the tasks they wish to perform. Studies have shown that using text labels with icons will corroborate the objective of icons and hence are more preferable. This practice is more critical when using icons for critical elements such as navigation.

​

In this case, the addition of text labels with icons reduces their abstraction. The additional information helps to convey the meaning and increases usability. This study is nominated by Hick’s law, which elucidates that the cognitive load usually increases on users if the design is too busy and unclear. This is because it is difficult to identify critical information with a crowded and complicated layout. In this case, the use of iconography with contextual clues simplifies the user experience and helps to reduce mental strain. Each product has its own iconography which is part of a design system. A design system is a collection of reusable components guided by clear standards which can be assembled together to build any number of applications. Nowadays companies like Salesforce, Uber, IBM, and Microsoft design their digital products by incorporating their own unique design systems. As the company grows, more features get added to the original design and old design patterns become outmoded. In this case, the design system plays a vital role as it helps the design teams to grow, save their time, understand the current design language, and to give a clear understanding of the product. If not used, the company’s product will lose its identity giving a sense of disjointing user experience.

​

In iconography, each icon is created in different sizes by using the frame. To start with, it is recommended to use a frame of 24x24 and ingredients like pixel grid, safe area/trim area, key shapes, strokes, corners, orthogonal, and mask. Each ingredient provides reference points to draw against. It is the designer’s choice to see what to choose or what to omit. Here is the relevance of these ingredients:

​

1. Pixel grid: The grid helps to draw an icon with specific parameters.

2. Safe area/ trim area: The trim area padding ensures icons retain their desired scale and surround the white space. It is usually recommended to use 2px from all corners. The save or live area ensures the placement of important content of the icon within the frame.

3. Key shapes: Key lines give you consistent sizes for basic shapes or proportions across the icon set. The four shapes used are — circle, square, vertical rectangle, and horizontal rectangle.

4. Stroke: Use a consistent stroke width for curves, angles, both interior and exterior ones. For example, if you’re using a 2px stroke for an icon then use 2px for other icons as well to maintain consistency.

5. Corners: Use a consistent corner- sharp or rounded- for all kinds of shapes.

6. Orthogonal: Key lines are intersected at the center point of the icon and create additional vertices to use. These lines commonly slice the canvas at 45 or 90 degrees. Use 45-degree angles for even anti-aliasing. Also, set the same step for the angles modifications (15 or 5 degrees).

7. Mask: A mask customizes the rectangular frame container of an icon from the original icon frame. For example, the play store icons are rounded rectangles masked from all the corners.

​

​

​

​

​

​

​

​

​

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

​

The companies like Microsoft or Salesforce use four shapes to draw their icons.

​

Let’s create icons!

It is important to follow a set of rules to create an icon. Here are the following steps which must be used to create pixel-perfect icons:

1. To begin with, choose the frame size. Let’s say we want to create a calendar (heart) icon. So for that, take a 24x24 frame size and use a pixel grid. Draw key shapes to avoid any kind of inconsistency.

2. Now, draw a calendar icon with a pen tool.

3. After creating a vector icon, make sure all lines have a consistent stroke value and name the icon in a specific format.

4. Once you’re done with the icon, it is important to check whether the safe area is the same from all four corners or not. If not, then make it the same. Usually, it is recommended to leave 2px from all sides so that icon is in the middle.

5. Check other ingredients like all corners width, orthogonally intersection, and masks if needed.

6. Now, convert the icon into a symbol by using the option of “create component” and name it in a specific format (icon/icon name)

7. Finally, your icon is ready to use!.

​

You can create another icon of different sizes by using this icon. For example, if you want to create a calendar icon of 36x36 size then you just need to resize the 24x24 icon to 36x36 by using the scale tool on Figma. Use the same process for creating other icon sizes.

​

Here are a few icons which are created by using the same process.

​

​

​

​

​

​

​

 

 

 

Remember, you do not need to create all icons if the icons are easily available online. There are resources like the Noun Project, Iconfinder, and Flaticons that allow you to download free vector icons. Use these time-saving resources to create your icon library and make your life easy.

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

Let’s accompany these best practices of iconography for better reach.

​

I hope you find it useful and interesting. Feel free to follow me for all the latest works. See my more stuff on Dribbble, Behance, Website.