Foundation Iconography

Updated: February 23, 2022

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
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
  • 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
SAP Fiori for iOS App Icons

Icon Colors

 Tint Blue
#0070F2
Blue 7
#0040B0
White
#FFFFFF
Grey
#EAECF0

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