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 and aligned in several formats used by SAP applications. The icons are essentially vector graphics that can be resized easily without compromising their appearance.
The design language for Quartz-themed 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, SAP delivers icons in a font format by default. The SAP icon font contains multiple icons in one file with a small file size, making it convenient to deliver updates with each SAP product 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 the development documentation.
SAP icons are also part of the theming base content, which is available for all technologies supported by SAP.
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:
- Take inspiration from the real world.
An icon should be easily recognized by a user. (Note that this does not imply skeuomorphism.)
- Make 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 (for example, within different labels).
- Use 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.
- Adhere 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 for circles and squares and brings the necessary consistency and stability to 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: 12x16px 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 icons used in most UI controls. Other listed sizes depend on individual control specifications.
At 16px, the main line thickness is 1px. This 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 like 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.
Follow the links below to find out more about iconography.