SAP icons have been created with a friendly, yet elegant style that is consistent in terms of size, stroke and balance. The icons are tailored for simple and direct user interaction, using metaphors that are easy to understand. Each icon has been hand-crafted, hand-hinted, and aligned in font format. The icons are essentially vector graphics which can be resized easily without compromising their appearance.
The design language for icons used within SAP products is created to work across all supported browsers, devices and operating systems. The style can be described as:
This approach is meant to communicate the simplicity, sophistication, and integrity represented by SAP solutions. The style integrates basic geometric shapes in order to give a more prominent appearance.
Icons can be supported in multiple file formats. However, SAPUI5 delivers icons as font format by default. The SAP icon font contains multiple icons in one file with a small file size and allows the convenience of updates that can be delivered with each SAPUI5 release. Custom icons can even replace the SAP icon font if an alternative format or style is desired. Additional icon font files can also be added to the SAPUI5 icon pool.
For more information on custom icons, see OpenUI5 development information.
Icon semantics are used to define a set of visual elements that indicate functions, objects, and states for iconographic communication.
Finding the right visual semantic to indicate a consistent meaning to the user is based on the following essentials:
- Taking inspiration from the real world.
An icon should be easily recognized by a user. (Note that this does not imply skeuomorphism.)
- Making use of context.
The context of an icon contributes to its meaning.
A semantic element can have different meanings for the user depending on where it’s located, such as within different labels.
- Using clear, simple, and recognizable shapes.
For accessibility reasons, visual elements should be drawn as clear shapes and should not rely upon colors or other means in order to be recognized.
- Adhering to interaction design standards throughout the graphical user interface.
The Geometric Icon Grid System
The simple geometric icon grid was created as the foundational anatomy of the icons. This ensures visual balance concerning circles and squares and brings the needed consistency and stability of the shapes that form the structure of the icon metaphors.
A Closer Look at 16px Icons
Here is a closer look at how icons are designed using the grid system:
- Circles: 16x16px.
- Squares: 14x14px within a 16px grid.
- Vertical Rectangles: 16x12px within a 16px grid.
- Horizontal Rectangles: 14x12px within a 16px grid.
A Closer Look at 32px Icons
Line Thickness and Border Radius
In general, the base vector size created for SAP icons is 16px for small icons (used for compact desktop mouse and keyboard optimized controls) and 22px for large icons (cozy sizes are touch optimized). Other listed sizes depend on individual control specifications.
At 16px, the main line thickness is 1px. This of course scales up to 2px at size 32px.
Arrow Styles – Thin
Arrows have been aligned throughout the icon-set to be lighter and a little rounder to remove the roughness from the user-interface controls.
Examples of thin arrows include: dropdown arrow, refresh, sort, and more.
Thin arrows are drawn with 1px line thickness at 16px with a 1px border radius.
Arrow Styles – Emphasized
This is an emphasized arrow style that caters for additional affordance in the user interface and adheres to the simple clean style.
Examples of arrows include: navigation, expand, move, and more.
Emphasized arrows are drawn with 2px line thickness at 16px with a 1px border radius.
Border Radius – Regular
The subtle border radius helps to reduce rough edges and gives a friendly appearance.
A border radius that is 1px at size 16px will naturally scale up to 2px at size 32px.
Border Radius – Emphasized
Comment or notification style icons and speech bubbles have an emphasized border radius to help distinguish them.
The overall style is consistent with all other icons, However, a small distinguishing feature such as a border radius increase can help a subset of symbols to stand out from the rest. The change in border radius impacts the grid system structure. This is an example of how flexible the grid system can be.
A border radius that is 2px at size 16px will scale up to 4px at size 32px.
Want to dive deeper? Follow the links below to find out more about iconography.