Icons: Creating a Flexible Set
Icons in user interfaces (UI) are visual symbols that help users navigate and interact with digital interfaces efficiently. They provide quick, intuitive cues for actions or information without requiring lengthy text descriptions, especially when UI space is limited.
In design systems, a flexible and balanced icon set is crucial. Icons appear in various areas of a screen, making it important to get their size, balance, and consistency right for both organisational teams and end users.
Challenge: Revamp the icon set in the design system to achieve optical balance, scalability, stylistic consistency, and seamless component integration.
The icon set in the Atlas Design System was created many years ago. As the system matured the icon set became dysfunctional, unorganised and visually imbalanced especially when icons were placed in close proximity.
Objective: The main goal of revising the icon set was to modernise it, streamline the process of adding requested icons, and enhance the ease of searching and finding icons in both Figma and development documentation.
Naming icons
The first step in revisiting the icon set was to review the naming convention. The existing names lacked a consistent pattern, with related icons often having contrasting names. Additionally, many icons had specific contextual names assigned years ago, limiting their flexibility. This inconsistency made it difficult to maintain and expand the icon set effectively.
To address this issue, we conducted a comprehensive audit of all icons to identify commonalities and establish a consistent naming convention for the icon set. The examples showcase how various styles and common traits of icons were grouped together. This audit revealed many inconsistencies in the existing naming conventions.
Before:
Establishing convention
text here
Establishing and identifying an icon family
Finding icons
Locating specific icons or discovering potentially useful ones was challenging for system users when using search tools in both design and development environments. Using the close icon and it’s related icons as an example we can see in the before
Before: When searching for a close icon using its identifiable "x" shape as the search keyword, no viable options appear in Figma's assets panel.
After: As consumers search the system, they can see related actions through 'tags' in the component description, regardless of the icon's name. These tags also appear in the development documentation.
