Updated: June 9, 2022

SAPUI5 Version 1.104

Iconography – Quartz

Intro

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.

Vector based icons drawn with a flexible geometric grid system (Quartz visual theme)

Design Language

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:

Simple
Fresh
Serious
Neutral

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.

Icon Formats

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

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.

Simple and recognizable metaphor

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.

The anatomy of the geometric icon grid system

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.

Details of 16px icons based on the icon grid system

A Closer Look at 32px Icons

If the icons are scaled up to 32px, the measurements are as follows:

Circles: 32x32px.
Squares: 28x28px within a 32px grid.
Vertical rectangles: 32x24px within a 32px grid.
Horizontal rectangles: 24x32px within a 32px grid.

Details of 32px icons based on the icon grid system.

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.

Example of supported (actual) sizes that are manually aligned within icon font formats

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.

Thin arrow style

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.

Emphasized arrow style

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.

Line thickness and border radius

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.

Emphasized border radius achieved with a flexible grid system

SAP Icon Font

To ensure availability of SAP icons for all technologies supported by SAP, the icons are part of the theming base content and also as part of OpenUI5. The SAP icon font is made available under the Apache 2.0 license.