Updated: May 29, 2018

Iconography

Intro

Iconography is essential to 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, our goal is to enhance the accessibility and overall ease of use of 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 SAP Fiori for iOS icons as a set
  • Use icons to efficiently communicate important actions to users
  • Use icons to indicate navigation actions to other screens
  • Leverage icons in order to make effective use of 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-colored icons against light backgrounds

Design Language

The SAP Fiori for iOS icon library combines our Fiori design language with visual patterns from the iOS icon library. This allows us to have a robust collection that offers the familiarity, accessibility, and cohesiveness SAP customers expect from native iOS apps.

These principles define our icons:

  • Simple
  • Coherent
  • Modern
  • Delightful

By designed based on these principles, we ensure our icons communicate efficiently, form a cohesive collection, and look beautiful.

Detailed view of SAP Fiori for iOS system icons
Detailed view of SAP Fiori for iOS system icons

SAP Fiori for iOS Icons

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

 

Launch Icons

Launch icons play an essential role in making our SAP customer apps look beautiful. That said, they should clearly communicate to the user the app’s main purpose. Launch icons may follow the SAP Fiori for iOS branding guidelines or they may be themed using the customer’s own branding. Launch icons are found in the app store, on the home screen, in system settings, and in search results.

A closer look at the launch icon set
A 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 a numeric KPI 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 within 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 bartoolbar, and tab bar, 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 the object cell and header components.

16px indicator icon set
16px indicator icon set

Icon Requests

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

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

Once we review the use case, we may validate the use of an icon or may offer other recommendations. You can request icons by sending this information to SAP Fiori for iOS icons.

 

Resources

Download the SAP Fiori for iOS UI Kit, which includes our current icon sets.