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.

SAP Fiori for iOS icons in light tint and dark tint

Usage

Do’s

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

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

System Icons

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

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 bar, toolbar, and tab bar, as well as within individual components.

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

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

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.