Updated: June 24, 2021

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
In case custom icons are needed, here is the guide on how to integrate the custom icons intro SF Symbol library.

SAP Fiori for iOS icons in Light Mode

Usage

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
Create at least 16 variants (small, medium, and large for regular, medium, semibold, and bold styles) for each custom icon

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

SAP Fiori for iOS Icons

The SAP Fiori for iOS icon library identifies custom-made icons and 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.

Custom Icons

Icon	Icon Name	SF Symbol Name	Description
	Add Branch Point	add.branch.point	Used for representing adding a branch point in Map View
	Add Point	add.point	Used for representing adding a new point in Map View
	Audio File	audio.file	Used for representing an audio-type file
	Cafe Off	cafe.off	Used for representing a cafeteria in Map View
	Cafe On	cafe.on	Used for representing a selected state of a cafeteria in Map View
	Campus Off	campus.off	Used for representing a campus in Map View
	Campus On	campus.on	Used for representing a campus in Map View
	Change Status	change.status	Used for representing a changing status action
	Clear All Off	clear.all.off	Used for representing an action related to collapsing view
	Clear All On	clear.all.On	Used for representing an action related to expanding view
	CSV File	csv.file	Used for representing a CSV-type file
	Female	female	Used for representing female gender
	Gender Neutral	gender.neutral	Used for representing neutral gender
	Hierarchy Off	hierarchy Off	Used for representing an action to toggle drilldown in Hierarchy View
	Hierarchy On	hierarchy On	Used for representing an action to toggle drilldown in Hierarchy View
	Image File	image.file	Used for representing an image-type file
	Legend Off	legend.off	Used for representing an action to toggle legend in Map View
	Legend On	legend.on	Used for representing an action to toggle legend in Map View
	Male	male	Used for representing male gender
	Map Asset	map.asset	Used for representing an asset
	Map Security Camera	map.camera	Used for representing a security camera
	Map Functional Location	map.functional.location	Used for representing a functional location
	Map Gym	map.gym	Used for representing a gym
	Map Restroom Men	map.restroom.men	Used for representing men restroom
	Map Restroom Women	map.restroom.women	Used for representing women restroom
	Map Security Office	map.security.office	Used for representing a security office
	Map Turnstile	map.turnstile	Used for representing a turnstile
	Map Venue	map.venue	Used for representing an event venue
	PDF File	pdf.file	Used for representing a PDF-type file
	Polygon	polygon	Used for representing a polygon
	Polyline	polyline	Used for representing a polyline
	Presentation File	presentation.file	Used for representing a presentation-type file
	Stadium Off	stadium.off	Used for representing a stadium
	Stadium On	stadium.On	Used for representing a stadium
	Substract Point	substract.point	Used for representing a stadium
	Table File	table.file	Used for representing a table-type file
	Traffic Off	traffic.off	Used for representing a traffic light
	Zoom Extent	zoom.extent	Used for representing an action to reset zoom level to include all content

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

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