Intro

Material Design outline icon library
Material Design outline icon library

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

Do
  • 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
  • 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

24 x 24 grid (1X scale)
24 x 24 grid (1X scale)
Live area, designated space for your icon
Live area, designated space for your icon
24 x 24 grid (10X scale)
24 x 24 grid (10X scale)
Padding space, to provide ample space around your icon
Padding space, to provide ample space around your icon


Pixel Perfection

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

Do
Aligned icon showing crisp edges
Aligned icon showing crisp edges
Don't
Misaligned icon showing blurred edges
Misaligned icon showing blurred edges

Product Icons

Fiori for Android Product Icons

SAP Fiori for Android product icons are blue outline icons placed against a white background in order to maintain the SAP Fiori look and feel.

Fiori for Android product icons
Fiori for Android product icons

Icon Colors

Tint
#0070F2
Blue 7
#0040B0
Grey
#EAECF0
White
#FFFFFF


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