Before we dive into the icon design guidelines, let’s learn about what the term iconography means. Iconography is a visual design system, guiding the representation of functions, features, and concepts via icons. There are rules which are put into place that govern the visual style and aesthetic of these icons. These rules are called the ‘Iconography guidelines.’ They help in setting up a brand’s guidelines and developing their brand’s identity. So, you might be wondering how exactly an icon can belong to a particular brand? Ever heard of the term ‘Material Design’ or ‘Fluent Design’?

These are the design systems created by the top tech giants at Google and Microsoft, respectively.
Both these design systems have the same goal, which is to empower and improve the visual design of the products on their respective platforms.
It also includes maintaining proper design ethics and theme consistency. With the same goal in mind, they both take a very different approach to reach there. It is very fundamental to compare the iconography of both these design systems.

Iconography Guidelines- Material design
Left – Google Material Design, Right – Microsoft Fluent Design.
From the first look itself, it is easy to identify the difference between the approach each design system takes to define its icon system. Material design uses thick outlines for the icon boundaries, while Fluent design uses thin outlines for its icon boundaries. The more the design systems we look at, the broader their differences get.
Iconography Guidelines- Atlassian

Atlassian Design System – Icons

For example, take a look at the icons of the Atlassian Design System. The icons are designed at 36px for websites and 48px for technical diagrams. They have also embraced the two-tone effect wherever possible.

Iconography Guidelines-1

Creating Custom icons within the guidelines

The iconography guidelines of any design system explain the set of rules to be followed to design an icon by their design system. These rules are generally dictated by aspects like stroke, caps, custom curves, radius, angles, icon depth, etc. You can find the iconography guidelines of any particular design system under the ‘Iconography’ section of their website.
Is it essential to follow these guidelines, if yes, then why so?

Icons Designs
On one side, have a bottom navigation bar with different icon designs and on the other a bottom navigation bar with a similar icon design four tabs each.
Guidelines help define a significant factor in the visual design of these icons – Consistency. If you notice, the bottom navigation bar in the first app has icons with varying thicknesses for their outlines, and that approach looks unprofessional. While the icons in the second app, look like they belong to the same family due to the various aspects that tie them together.

Iconography guidelines are easy to use and very necessary to implement if you want to make your design look clean and consistent.
If you don’t want to design an icon, there are plenty of free and readily available icons available on any design system website adhering to their standards. Here are links to the iconography brand guidelines of the design systems we talked upon in this article. Segments like retail or consumer brands also do the same to create a unique visual style for their icons.

Google’s Material Design                        Microsoft’s Fluent Design System                   Atlassian Design by Atlassian 

 

Sandesh Subedi

Sandesh Subedi

A profound lover of the internet, web & technology. A firm believer in the good design of things and a passionate design enthusiast with substantial experience in UI | UX Design, Web, and digital design solutions for Enterprises and Startups alike.

Leave a Reply