Redesigning the SAP Icon Library
Creating a universal language library that simplifies feature recognition, making software interactions intuitive and user-friendly
Just imagine, you’ve finally landed at your dream destination and you’re all set to explore a new culture, try new foods, and admire the landscapes. But there’s a catch — you can’t read or speak the local language. As you step out of the airplane, you realize that there’s no one to follow and you still have to find the passport service, collect your luggage, and locate public transportation to reach your accommodation. You are lost for a bit and getting nervous, especially when you recognize the airport signs are all in the local language, and you can’t understand them.
But wait! You spot signs with icons that help you navigate through the airport easily. Phew!
This example shows us that icons are a universal language that allow for faster, easier, and accessible semantic recognition for everyone. In applications, they are the first sign when an immediate action is required, like the semantic icons used in notification messages or buttons.
Library style
As shown in the example above, the iconography representing a message is as important as the text for fast communication. Just like the typography selected for styling a page or the border and corner radius style decision of a design system, the iconography should follow the design language’s look and feel.
Our latest launch of the SAP design language, Horizon, has specific characteristics that aim to simplify and minimize an element’s style, including bolder, softer corners and friendlier aspects that intend to create a similar experience, sympathizing with consumer and mobile applications, yet working in business software. While we redesigned the iconography library to follow the new style, we focused on simplifying the shapes, including clearer and recognizable aspects, without losing the semantics and metaphor already established by the previous icon style from Fiori 3 (see image below). The aim of maintaining the same metaphor was to avoid confusing users when switching from one software theme to the other.
Establishing a process
We identified and collected all of the shapes that are similarly used within each icon metaphor, recognizing some inconsistent visual aspects. For example, the small check marks or “x” symbols can be used stand-alone or within an icon composition, like next to a person, object, or calendar. Depending on the icon context, this combination may represent success, approval, rejection, or cancellation. These frequently used shapes within an icon set can be identified as commonly used modifiers. We’ve allocated a specific art-board for each identified commonly used modifiers to collect and reuse them as needed.
Defining the style principles was a crucial step in creating a new icon library from the ground up. To ensure consistency and coherence in the design, we established a grid system as the foundational anatomy for all icons. We also defined other key styles like weight, spacing, corner radius, and attached sign or asset icon positioning principles. By doing so, we were able to create a clear and consistent design language for the entire icon library.
We worked hard to redesign over 700 icons, ensuring that each shape was well-aligned and defined. We ensured a high quality of icons, independent of the screen’s resolution where the icon would be set.
After preparing all the icons, we delivered two icon libraries for development production: one for icon-fonts and another for SVGs. We recently added SVG icons to our SAP icon libraries, making it possible for all SAP technologies to use them, and thus ensuring a consistent user experience.
To facilitate finding icons within the library, we keep updating a technical JSON file that contains tags with suggested names. These names are based on the metaphor or shape representation, and they help us to quickly search for the desired icon.
Propagating the style
As we defined the design and created the icon library, it was time to propagate the style and process across the other SAP iconography libraries delivered by SAP’s lines of business, such as BTP, Cloud ERP and Signavio. To achieve this, we conducted workshops with five of them, enabling the teams to update their icon libraries to the new style, using the processes and materials we prepared during our development.
The work done has resulted in a consistent look and feel for the different iconography libraries in SAP products that follow the Horizon theme. It allows us to deliver on our goal to make it easier for SAP software users to intuitively identify functions and features with a universal icon language without getting lost — just like passengers that feel confident navigating their way via the signage at a well organized airport.
Special thanks to Gerry Keane and Luisa Kohl for the great teamwork during this journey; the result wouldn’t be the same without your support.
Experience matters. Follow our journey as we transform the way we build products for enterprise on www.sap.com/design.
