Icon Guidelines

Using Icons

Using icons is a great way to make the UI less text-heavy and easier to comprehend, either by replacing common text labels or attaching them to less common labels.

Common labels can be replaced with icons altogether, reducing the text on the page — for example, a trash can icon instead of "Delete", or a warning icon instead of "Warning". When replacing a label with an icon, we recommend using the replaced text label as a tooltip (e.g. for a button with a trash can icon, display "Delete" as the tooltip).

For less common labels, icons can make the label easier to understand by displaying the icon nearby (e.g. a media database icon next to "Media Database").

---

Contributing Icons

1. Icons don't have to be super-specific to be useful. A generic "edit" icon works perfectly fine for "edit campaign" — if you can use an existing generic icon, you don't need to make a new one.
2. The generic icon library should be expanded with icons that can be used in multiple contexts. Service-specific icons (e.g. ac-*) have a bit more flexibility, but we still recommend being mindful about necessity. The more icons we have, the harder it becomes to maintain the library.
3. Before creating a new icon, check the SAP Icon Explorer. If a suitable icon exists, you can create an SAP Engagement Cloud version following the style and technical guidelines below.
4. We recommend product teams to draft icons themselves and collaborate with a Design System designer to apply finishing touches.
5. Picking the right icon name is more important than drawing the right graphic — names get implemented in UI code and are hard to change retroactively.

---

Creating Icons

Style

Canvas: Use a 24×24 px artboard. Most icons are displayed at 24×24 px, occasionally at 16×16 px.

Stroke width: Use 2px strokes. Avoid 1px strokes. In rare cases 3–4px strokes make sense (e.g. filled icons using inner stroke as negative space).

Style: Use outline style instead of filled. Small elements that would look off in outline style can be filled.

Rounded corners: Use 2px rounded corners for rectangular objects. Some shapes may need 0–1px (e.g. triangles).

Arrows: Arrowheads should be V-shaped, not triangle-shaped.

Negative space: Avoid using negative space to depict forms.

Badges: Display badges at the bottom right for complementary meanings (add, remove, check, etc.).

Composite icons: Reuse shapes from other icons where it makes sense. Avoid more than 2 parts per icon. Arrange composite icons diagonally — one part top-left, one bottom-right. Base shapes in a left-to-right environment face right.

Technical

Avoid anti-aliasing: Align hard vertical and horizontal edges to the pixel grid. Circles and diagonals don't need perfect pixel alignment.

Padding: Provide at least 1px (ideally 2px) padding within the artboard.

Single shape: The end result should be a single vector layer with a fill attribute (no borders). In Figma: turn all borders and paths into outlines, combine layers, and use Flatten.

Clean SVG: Remove all unnecessary attributes. The final SVG should look like:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M5 8v4.52A10.7 10.7 0 0113 9c3.4 0 6.43 1.54 8.35 3.93l-1.67 1.21A8.54 8.54 0 0013 11a8.55 8.55 0 00-6.56 3H11v2H3V8h2z"/>
</svg>

Remove the fill attribute so the UI Framework can recolor the icon.

Naming

• Generic icons use an e- prefix: e-save, e-reset, e-clear.
• Service-specific icons use different prefixes: ac-, nav-, des-.
• Use semantic names that are easy to reuse: e-tag-add rather than e-attach-pricetag.
• Keep names as short as possible: e-save rather than e-save-new-document.
• Add modifiers at the end: e-tag, e-tag-add, e-tag-remove.

---

Icons for Common Actions

The following icons have a fixed meaning and tooltip. Do not use them with a different meaning in a different context.

Icon	Tooltip	Description
comment	Send feedback	Opens a dialog for the customer to send feedback on this page.
eye	View	Opens the item fully for viewing.
edit	Edit	Opens the item in edit mode.
trash	Delete	Deletes the item. Always followed by a confirmation message.
question-circle	Help	Opens a larger tooltip with detailed description and a help link.
refresh	Refresh	Refreshes the page or list.
combine	Combine	Combines two items to make a third.
files	Copy	Creates an identical copy of the item.
th-list	View contact list	Displays the search results page with a list of contacts.
rename	Rename	Opens a pop-up containing only the name field of the item.
chart-column	Report	Opens the reporting page for the item.
user	Personalization	Opens the Personalization feature.
conditional-text	Conditional text	Opens the conditional text feature.
clock	Send Time Optimization	Indicates this email was sent using STO.
gift	Incentive Recommendation	Indicates this email contains an incentive.
settings	Settings	Opens the settings for the item.