App Icon

To ensure a seamless and recognizable user experience, it is essential to maintain consistent core visual features for the product icon across all system appearances, including default, dark, clear, and tinted modes. Avoid creating custom icon variants that change elements, as this can make it difficult for users to quickly find the app when switching appearances.

When designing dark and tinted icons to feel naturally integrated beside system apps and widgets, you can retain the original color palette; however, be mindful that dark icons must be more subdued, and clear and tinted icons should be even more subtle to harmonize perfectly with the surrounding system tone.

App icon modes (from left to right, top to bottom): default, clear (light), tinted (light), dark, clear (dark), and tinted (dark)

The Naming Center is our internal platform for requesting, reviewing, and managing product or initiative names within SAP’s official branding process. It also provides guidance for internal mobile app naming, ensuring all names align with SAP’s global naming strategy and standards. You can submit new name requests, browse approved names, learn naming guidelines, and manage subscriptions for updates.

Mobile App Name

For detailed rules, exceptions, and examples, visit the Naming Center.

General App Name

This is the name shown in the app store. Keep it concise—up to 30 characters maximum. Avoid using words such as “mobile” or “app” in the title, since the store context already makes it clear that it’s an application.

Short Name

The short name appears underneath the app’s launch icon on the user’s device. It should be clear, recognizable, and limited to 12 characters. Avoid including “SAP” in this short name to keep it clean and consistent with SAP’s mobile naming standards.

The product icon is composed of three layers, representing the three-tier architecture.

1. Database Layer
2. Logic Layer
3. UI Layer

The first level is the database layer, which is the base shape of the app icon. The second layer represents the logic layer. The UI layer is the third layer of the product icon. For some icons, it is also possible to use a highlight layer if needed.

Apple’s Icon Composer helps you design and export Liquid Glass app icons. Integrated with Xcode 26, it simplifies your workflow by letting you assemble and customize icons, consolidating multiple export steps into a single .icon file.

Icon Composer streamlines the creation of layered icons from a single design, featuring the dynamic Liquid Glass effect for iPhone, iPad, Mac, and Apple Watch. Its multi-layer format allows you to tweak Liquid Glass properties, preview your icon with dynamic lighting effects, and annotate across various appearance modes. Designed for seamless integration with Xcode, Icon Composer also provides a flattened export option for your marketing and communication needs.

Getting Started:

1. Launch Apple Icon Composer after creating your app icon design.
2. Create a new app icon project (or use our example file).

Template Configuration: When setting up your new template, configure the background with these specifications:

• Fill: Gradient
• Gradient Color 1: #FFFFFF (White)
• Gradient Color 2: #EAECF0 (Light Gray)

Automatic Adjustments: The background colors automatically adjust to dark mode and transparent variants, ensuring your icon looks great in any system appearance.

Structure your icon with logical layer groups for optimal control and customization:

Import Your Assets: Drag and drop PNG files directly into Icon Composer to add your design elements.

Create Layer Groups: Organize each design element into its own group to unlock styling options:

• Background Layer
• Second Layer
• Third Layer
• Highlight Layer

Pro Tip: Keeping each shape in a separate group allows you to apply individual effects, adjustments, and blend modes for maximum creative control over your final icon design.

Group Settings:

Opacity: 100%

Blend Mode: Normal

Mode: Individual

Specular: On

Blur: Off

Translucency: Off

Shadow: Neutral at 50%

Layer Settings:

Opacity: 100%

Blend Mode: Normal

Fill Type: Gradient

Gradient Color 1: #0057D2

Gradient Color 2: #002A86

Group Settings:

Opacity: 100%

Blend Mode: Normal

Mode: Individual

Specular: On

Blur: Off

Translucency: Off

Shadow: Neutral at 50%

Layer Settings:

Opacity: 100%

Blend Mode: Normal

Fill Type: Gradient

Gradient Color 1: #1B90FF

Gradient Color 2: #0057D2

Group Settings:

Opacity: 100%

Blend Mode: Normal

Mode: Individual

Specular: On

Blur: Off

Translucency: Off

Shadow: Neutral at 50%

Layer Settings:

Opacity: 100%

Blend Mode: Normal

Fill Type: Gradient

Gradient Color 1: #4DB1FF

Gradient Color 2: #1B90FF

Group Settings:

Opacity: 100%

Blend Mode: Normal

Mode: Individual

Specular: On

Blur: On at 20%

Translucency: On at 50%

Shadow: Neutral at 50%

Layer Settings:

Opacity: 100%

Blend Mode: Normal

Fill Type: Solid

Fill Color: #FFFFFF

Review Your Icon:

• View your icon against dark backgrounds to ensure proper visibility and contrast.
• Preview the monochrome version and experiment with the tinted color options available in Icon Composer.

Export Your Icon:

1. Navigate to “Edit > Save” to export your icon in the required .icon format.
2. Save the .icon file with a descriptive filename.
3. Deliver the .icon file to your development team for integration.

Optional: If you need additional formats for documentation or other purposes, you can export individual sizes as PNG files.

Your app icon is now ready for implementation!