Product Launch Icons

Foundations / Visual / Iconography / Product Launch Icons

Intro

Product launch icons help communicate the purpose of the SAP Business Suite experience, enabling users to instantly identify products on the suite’s home page and in the product switch.

Designed to complement the Horizon visual language, these icons align with the SAP mobile product icons and app icons to convey a unified brand identity. The balance between individual icon metaphors, characteristic shapes, and coherent visual design embraces the SAP design style.

When to Use

Product launch icons are reserved exclusively for launching products within SAP Business Suite and must not be used for other purposes. They are used on the home page (SAP Start) and in the product switch in the shell bar. Per SAP Brand guidelines, product launch icons may be permitted in board-level keynote presentations in exceptional circumstances. Each icon must always be accompanied by its corresponding text label.

Appearance

Unlike logos, product launch icons are optimized for clarity at small sizes and designed to work consistently across the suite, ensuring intuitive navigation and a cohesive user experience.

To maintain a recognizable identity across web and mobile platforms, icons must retain core visual features and use our standard design variables. This ensures the SVGs automatically support all system themes, including Horizon, Quartz, Belize, and High-Contrast modes.

A group of icons with a cloud in the middle AI-generated content may be incorrect.

Left to right, top to bottom: Horizon, High-Contrast White, High-Contrast Black, Belize, Quartz Light, Quartz Dark

Current Collection

A blue cloud with white lines AI-generated content may be incorrect.

Analytics Cloud

A blue cubes on a black background AI-generated content may be incorrect.

Build

A blue cloud with circles and circles AI-generated content may be incorrect.

Business Data Cloud

A blue cloud logo on a black background AI-generated content may be incorrect.

Cloud ERP

A blue shopping basket with white stripes AI-generated content may be incorrect.

Commerce Cloud

A blue logo with a black background AI-generated content may be incorrect.

Concur

A blue logo with a black background AI-generated content may be incorrect.

Customer Experience

A blue logo with black background AI-generated content may be incorrect.

Datasphere

A blue and white object AI-generated content may be incorrect.

Fieldglass

A blue paper money with a white circle AI-generated content may be incorrect.

Finance

A blue cloud logo with a cylinder and clouds AI-generated content may be incorrect.

HANA Cloud

A blue factory building with white stripes AI-generated content may be incorrect.

Industries

A blue logo with black background AI-generated content may be incorrect.

Integration Suite

A blue shopping cart with white text AI-generated content may be incorrect.

Procurement

A blue cloud with white lines AI-generated content may be incorrect.

Sales Cloud

A blue triangle with black background AI-generated content may be incorrect.

SAP Start

A blue and white rectangular sign with a white speech bubble AI-generated content may be incorrect.

Service Cloud

A blue logo with a white light AI-generated content may be incorrect.

Signavio

A blue heart with people in it AI-generated content may be incorrect.

SuccessFactors

A blue gear symbol on a black background AI-generated content may be incorrect.

Supply Chain Management

A blue circle with a leaf in it AI-generated content may be incorrect.

Sustainability

Approach

For product launch icons, we use SAP Fiori icons as a foundation. The best way to start creating product launch icons is to choose an SAP Fiori icon that best represents your app metaphorically, then apply the style. While it's not required to use an icon as a base, product launch icons should follow the same style.

Product launch icon metamorphosis

Anatomy

The product launch 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 launch icon. For some icons, it is also possible to use a highlight layer, if needed.

Specification

Background layer

Second layer

First layer

Third layer

Product Icon Creation

To streamline icon creation for new products in SAP Business Suite, refer to the Figma file featuring a usage guide and a product launch icon template with the color variables. To request a new product launch icon or to request access to an existing one, there will be a central request process.

Product Launch Icons request (coming soon)

Request a new product launch icon or request access to existing ones. Requests are granted on an as-needed basis.

Mobile Horizon App Icon Guidelines

View the Mobile Horizon Liquid Glass App icon guidelines for iOS.

Mobile Horizon Product Icon Guidelines

View the Mobile Product Icon guidelines for Android.