Service Icons
Foundations / Visual / Iconography / Service Icons
Intro
Service icons communicate the purpose of an application within third-party marketplaces. They are the web counterpart to the mobile app icons.
Service icons connect the design of SAP Fiori icons with the design for native app icons. In this way, we can ensure consistent and inclusive metaphors, but with the look and feel of an app icon.
Approach
As a base for the app icons, we use the same source as the SAP Fiori icons.
The best way to start creating app icons is to simply pick out an SAP Fiori icon that is a good metaphor for your app and then apply the style. It is not mandatory to use an icon as a base but your app icon should follow the same style.
All icons are aligned to the [external_only]icon grid.[/external_only][internal_only]icon grid, which can also be found in the vector icons file.[/internal_only]
Icon grid
Fill icon
Apply style
Apply background (optional)
Anatomy
We distinguish between simple and complex service icons:
- Simple service icons have one shape, with one gradient.
- Complex service icons have more than one shape, and can have more than one gradient.
For complex icons with multiple shapes, we recommend using the extended palette to create highlights within the service icon. To create more unique service icons, combine filled and outlined shapes.
Simple service icon
Complex service icon
Dos and Dont’s
Do
- Use service icons that communicate the purpose of the app.
- Use simple icons that are easy for people to understand and recognize.
- Use the same style to complement the Morning Horizon / Evening Horizon visual design.
- Design your icon as a full-bleed square image.
Valid service icons
Don't
- Don’t use service icons from other sources.
- Don’t include too many details. They can add visual noise to the icon and make it harder to recognize.
- Don’t use other colors for the service icon.
- Don’t layer shapes with different gradients on top each other.
- Don’t use images for service icons.
- Don’t use different stroke widths within an icon.
Invalid service icon (two shapes with different gradients)
Color Palette
Base Palette
Place the gradient diagonally across the grid
Extended Palette
Note on accessibility:
We can’t ensure accessibility for all extended color gradients. For important details, please use the base palette.
Background
If a background is needed, see the guidance for app icons (SAP Fiori for iOS).