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 that 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.
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.
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.
Creating Custom Icons within 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?
On one side, there is 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 about 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
If your current digital experience isn’t meeting user expectations, let Procreator Design assist you. Whether you’re in HealthTech, or EdTech, our specialized UI UX Design services are designed to elevate your platform. Explore the best UI UX Design Agency today and let’s start crafting interfaces that resonate and engage.
