Updated: September 28, 2017

Iconography

Intro

Iconography is essential in creating a cohesive and enjoyable app experience. Icons play a crucial role in communicating actions, information, feedback, and navigation. By providing a comprehensive icon library, the goal is to enhance accessibility and overall ease of use for our customers’ apps.

SAP Fiori for iOS icons in light tint and dark tint
SAP Fiori for iOS icons in light tint and dark tint

Usage

Do’s

  • Use Fiori for iOS icons as a set
  • Use icons to efficiently communicate important actions
  • Use to navigate to another screen
  • Use icons to effectively use screen real estate

Dont’s

  • Do not use icons from other sources
  • Do not place icons too close together
  • Do not place icons with half pixel increments
  • Do not use light color against a light background

Design Language

Fiori for iOS icon library combines our Fiori design language and visual patterns from iOS icon library. This allows us to have a robust library offering the familiarity, accessibility, and cohesiveness that SAP customers expect from native iOS apps. These are the principles that define our icons:

  • Simple
  • Coherent
  • Modern
  • Delightful

This approach allows us to follow a framework to ensure our icons communicate efficiently, are cohesive, and look beautiful.

Detail of Fiori for iOS system icons
Detail of Fiori for iOS system icons

Fiori for iOS Icons

Fiori for iOS icons are organized as icon sets based on their function, size, and placement within the app. The following sets are currently in our icon library.

 

Launch Icons

The launch icon is essential in making our SAP customer apps beautiful and to clearly communicate to the user the apps’ main purpose. Launch icons may use our Fiori for iOS branding guidelines or can be themed using the customers own branding. Launch icons are found in the app storehome screensystem settings, and search results.

Closer look at the launch icon set
Closer look at the launch icon set

 

KPI Icons

KPI icons are 32px icons that represent a measurable value and function as a visual identifier when placed next to KPI numeric value.

32px KPI icon set
32px KPI icon set

 

System Icons

System icons are 28px icons that cover a majority of tasks needed by our customers. System icons are used in the navigation bartoolbar, and tab bar, as well as in individual components.

28px system icon set
28px system icon set

 

App Icons

App icons are 28px icons that represent app-specific tasks covering SAP customers’ unique use cases. Like system icons, app icons are used in the navigation bartab bar, and toolbar, as well as within individual components.

28px app icon set
28px app icon set

 

Doctype Icons

Doctype icons are 28px icons that represent a type of file when a preview or image is unavailable. Doctype icons are found within the attachment item.

28px Doctype icon set
28px Doctype icon set

 

Map Icons

Map icons are 20px icons (40px when selected) that represent a business object’s location on a map. These icons are placed within the map marker.

20px map icon set
20px map icon set

 

Indicators

Indicators are 16px icons that denote the priority, attribute or status of a business object. Indicators are found within object cell and header.

16px indicator icon set
16px indicator icon set

Icon Requests

As part of the new Fiori for iOS icon library, we want to better organize the process of requesting Icons. To propose icon concept, please provide the following information:

  • app name
  • icon name
  • size
  • image of placement
  • description of use case

Once we go over the use case we may validate the use of an icon or may offer other recommendations. You can request icons at SAP_Fiori_for_iOS_icons@exchange.sap.corp.

Resources