Updated: December 17, 2020

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.

The SAP Fiori for iOS Design System makes use of Apple’s SF Symbols.  SF Symbols is a set of over 1,500 symbols that are aligned and configurable in a wide range of weights and scales.

Learn more about SF Symbols in the Apple Human Interface Guidelines

SAP Fiori for iOS icons in Light Mode
SAP Fiori for iOS icons in Light Mode

Usage

Do
  • 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
Don't
  • 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 identifies a standard subset of SF Symbols that are aligned with our Fiori design language. This allows us to have a robust collection that offers the familiarity, accessibility, and cohesiveness SAP customers expect across different platforms while still being consistent with the iOS experience.

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.

 

KPI Icons

KPI icons are 34pt icons that can be from the App icon or System icon set. If using System icon set utilizing SF Symbols, the symbols are from 28pt KPI – Light text style. They represent a measurable value and function as a visual identifier when placed next to a numeric KPI value.

34px KPI icon set
34px KPI icon set

 

System Icons

System icons, by default, are SF Symbols from the Title 2 – Light (22pt) text style. The icons 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.

The icons have a 28pt width and 28pt height. If the icon is tappable, the boundary of the touch area expands to a minimum of 44pt width and 44pt height.

28pt System icon set
28pt System icon set

 

App Icons

Similar to System icons, the App icons are 28pt by 28pt icons with a minimum of 44pt by 44pt touch area. The icons are however designed to cover specific tasks for SAP customer’s unique use cases.

28pt App icon set
28pt App icon set

 

Doctype Icons

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

28pt Dotype icon set
28pt Dotype icon set

 

Map Icons

Map icons are 20pt icons (40pt when in a selected state) 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 16pt 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

App Icon

To stay within the Fiori family, the App icon for Fiori for iOS apps are blue icons placed against a white background, both with a slight gradient.  The colors are consistent with SAP branding, and SAP customer apps should reflect the customer’s branding.

SAP Fiori for iOS App Icons
SAP Fiori for iOS App Icons

Icon Colors

Light Blue
#12B1EB
Dark Blue
# 0049AF
White
#FFFFFF
Grey
# E9E9E9

App Icon Creation

To learn more about the guidelines and process for creating iOS App icons see the Apple Human Interface Guidelines: App Icon 

Resources

To browse the full set of symbols, download the SF Symbols 2 app (Requires macOS 10.15.3 or later).