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 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.

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.

If the icons are scaled up to 32px, the measurements and details will look as following:

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

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.

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.

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.

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.

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.