SAP Fiori tools has brand new sparkling icons for all its components, as well as the main icon for the suite itself. When we introduced the product, the initial 3-4 icons were designed together as a somewhat coherent set. As SAP Fiori tools gained popularity and momentum, we kept building new extensions to cover more and more of the users’ needs. We added new icons as needed, but not coordinated as part of a unified design system.  

About 6 months ago, we found ourselves in a situation where we could not come up with another analogy for yet another icon, and we had no system to make a new icon to make it feel like it belongs in a family with other icons. So, we set out on a journey to change this. 

The new SAP Fiori tools icons are built from a common design system

We had several goals we wanted to achieve:

• Create a system which would allow us to make new icons in the future, essentially future-proof the set 
• Work out an underlying grid on which the icon elements would be placed 
• Define a style for the icon set so the icons look like they all belong together, having a family resemblance 
• Use the SAP-approved color palette 

Our journey took us through various stages of exploration, in which we examined possibilities with few limitations. After we learned from this broad exploration, we narrowed them down. Then we took that reference point and went broad again, utilizing what we have learned, to expand upon concepts and generate again a broad set of ideas and designs. Then we kept iterating like that for a few rounds in a cyclical expand-contract process. 

We settled on a 16 by 16 point grid with a few inner construction scaffolding elements, and we could place all of the designs onto it. 

A grid system allows us to create a consistent layout for all the SAP Fiori tools icons

We explored many icon styles and narrowed them down to some sort of Bauhaus-esque style with large chunky blocks, which can easily be visually parsed. This style also limits what elements we can use, serving as a guardrail for our designs, maintaining consistency among all of the icons. Almost all of the elements we used to construct the icons are simple rectangles (albeit with rounded corners), ovals, and triangles.  

Of course, this is connected with the theme of the functionality of SAP Fiori tools – a suite of smaller simple functions come together to form big applications. 

There were some elements from previous icons that we decided to keep. A compass always represents guidance. Therefore, our apps “Guided Development” and “Guided Answers” still retain the compass needle. The “Generator” retained its familiar lightning bolt, but we reworked it in our new visual style. 

Compass – guiding our users

Finally, the icon representing the entire SAP Fiori tools suite, conveys three things that the suite is about: the flower (SAP Fiori), the petals representing a multitude of apps, and the nut that’s holding everything together, tightly screwed in. 

We also went through many, many, color combinations. We tested monochrome variants, colorful variants, all sorts of contrasting combinations, until we finally settled on the warm golden-yellow combined with hot-pink, placed on SAP’s traditional blue background. We avoided the classic “overload of blue” color combination in order for our icons to stand out, and not to be lost in the sea of other blue-on-blue icons. 

We explored many color combinations for the new SAP Fiori tools icons

Initially we thought that we could get away without the white background rectangle and just have free standing icons. However, this would make the icons hard to see on dark themes. 

If we added the white frame, the icons would be safe to use anywhere, regardless of the background they could find themselves on. 

A white background makes the icons visible on any theme, like in this dark mode GitHub

Some of the icons aren’t directly visible in the product itself, and are practically just for internal usage. This is because some of our apps such as “Application Modeler” include multiple elements inside of it, like “Application Info Page”, and that piece doesn’t have much of external visual presence. However, we treat it as a separate project, and so it deserves an icon for itself, even if that icon isn’t exposed anywhere directly in the product. It can be still present in the documentation, GitHub repository, or similar. 

Over the coming days and weeks, we will be replacing our old icons with the new ones. Hopefully, we will manage to find at least most of the nooks and crannies where the icons have proliferated over the past few years. 

SAP Fiori tools can be accessed through SAP Business Application Studio, or as a download in Microsoft VS Code Marketplace.