Iconography is essential for creating a cohesive and enjoyable app experience. To maintain the look and feel of the SAP Fiori design language we advise using the outlined icon style provided by Material Design. Download them here.

Usage

• Use the Material Design outline icon set. 
• Use icons to highlight important actions for users. 
• Use icons to indicate navigation actions to other screens.

• Don’t use icon sets that are not from the outline Material Design library. 
• Don’t use different sized icons. 
• Don’t use third party icons.

Design Language

By using the icons provided by Material Design, we leverage the outline icon style, which is similar to the visual style of the SAP Fiori design language.

• Simple 
• Fresh 
• Neutral
• Modern 

Grid & Pixel Perfection

System Icon Grid

Pixel Perfection

To avoid having blurry icons, design the icons with full pixels, which means they should have whole number units, with no decimals.

Product Icons

Fiori for Android Product Icons

The product icon of SAP mobile apps communicate the purpose of SAP’s mobile experience and supports business users in recognizing the app in the Play Store and on their home screens.

Our new product icon design direction complements the new SAP Horizon visual design and creates a recognizable mobile brand. The balance between individual icon metaphors, characteristic shapes and coherent visual design embraces the SAP mobile product family.

We have created a guide that describes exactly how the new style should look like and how to create a new icon.

Approach

As a base for the product icons, we use the same origin as the Fiori icons. The best way to start creating app icons is to simply pick out a Fiori Icon which is the best metaphor for your app and then apply the style. It is not mandatory to use an icon as a base but it should follow the style.

Anatomy

The product icon is composed of three layers and stand for the three-tier architecture.

1. Database Layer
2. Logic Layer
3. UI Layer

The first level is the database layer and is the base shape of the app icon, then comes the second layer, this represents the logic layer and finally the UI layer which is the third layer of the product icon. For some icons there is also the possibility to use a highlight layer if needed.

• Use product icons that communicates the purpose of the app
• Use simple product icons because they are usually easier for people to understand and recognize
• Use the same style to complement the new SAP Horizon visual design
• Design your icon as a full-bleed square image

• Do not use product icons from other sources
• Do not include too many details, it will be difficult to determine and might make an icon seem noisy
• Do not use other colors for the app icon
• Do not use any color for the app icon background
• Do not use a picture for product icons

Specification

Product Icon Creation

To learn more about the best practices and process for creating Android product icons refer to the Material Design Product Icons article.

Resources

Material Design: Iconography – System Icons

Material Design: Iconography – Product Icons

Material Design: Outlined Icons Library