Iconography – Horizon

Foundations / Visual / Iconography / Iconography – Horizon

Intro

The SAP icons for the Horizon visual themes feature a fresh, friendly, and bold aesthetic. They are designed for consistency in size, stroke, and balance. As a core element of the SAP visual product identity, these icons are optimized for simple and direct user interaction through intuitive, easy-to-understand metaphors.

Each icon is handcrafted and aligned across the various formats required by SAP Fiori applications. Composed of vector graphics, they offer seamless scalability, ensuring a crisp and professional appearance at any size.

New SAP icon design for the Horizon visual themes

When to Use

Use the icons to:

Provide visual cues that help users navigate complex interfaces quickly.
Draw attention to primary actions.
Save space in tight UI areas like toolbars or tables.
Improve accessibility by adding a secondary layer of meaning to color-coded information.

Don't

Don’t use the icons to:

Replace essential text labels.
Decorate a layout without functional purpose.
Communicate complex concepts.
Overcrowd the UI. This leads to "icon fatigue", where users can't find anything because they are seeing everything at once.

Accessibility: Ensure that icons and visual elements are easy for everyone to understand, no matter which reading direction they use.
Consistency: Keep icon meaning and visual integrity consistent between LTR and RTL layouts.
Localization: Avoid culture-specific symbols, ensuring they are universally understandable and adaptable to different languages, regions, and reading directions.
Icon metaphors: Ideally represent a single, clear metaphor. If multiple metaphors are unavoidable, they must not require different RTL handling. For example, combining a directional arrow with a logo creates conflicts, as arrows must be flipped in RTL contexts while logos must not. Such combinations cannot be handled safely and increase development complexity.
Icon sets: If icons are part of a set, ensure as far as possible that similar icons are visually consistent with each other across all variants and reading directions, so that each set feels cohesive and unified.

Style

Bold: Strong presence that ensures clarity at small and large sizes.

Fresh: Modern, clean, and free of unnecessary detail.

Simple: Reduced complexity for better readability and faster recognition.

Friendly: Soft curves and approachable proportions.

Icon style – examples

Use the Icon Creation Kit, in combination with the Icon Creation Guidance, to ensure consistency and compliance when creating new icons.

Format

We currently support two primary methods for implementing icons:

SVG (scalable vector graphics): SVGs are handled as individual vector files. They offer high-definition rendering at any scale and offer advanced CSS styling options.
Icon font: An icon font treats icons as glyphs within a font file. This is a highly efficient way to manage large libraries and allows icons to be styled easily using standard text properties like font size and color.

Both formats are fully integrated into our environment, and you may choose based on the specific needs of your interface. While the system uses SVG as the default format, icon fonts are fully supported as well.

Sizing

Default base size (16px)

The standard size for most general interface elements, such as buttons and input fields, is 16px. This size offers the ideal balance between visibility and spatial efficiency for standard desktop and mobile layouts.

Small-scale and high-density (Up to12px)

For dense environments (e.g., data tables, checkboxes, or compact switches), smaller sizes are available.

Minimum: We recommend 12px as the absolute minimum size for any icon.
Recommendation: While the SVG library is scalable, avoid reducing icons beyond this point, as it may compromise stroke integrity and make the metaphor difficult to recognize.

Large-scale and emphasis (Up to 48px)

Icons can be scaled up to create visual hierarchy or provide aesthetic emphasis.

Use cases: Larger sizes are appropriate for avatars, generic tiles, or "highlight" areas.
Maximum: For standard UI components, we recommend a cap of 48px. Beyond this size, icons may begin to feel visually "heavy" relative to the surrounding typography.

Icon scaling

Grid System

To ensure every icon in the Horizon theme family feels like a cohesive part of the same DNA, we utilize a grid system. This system acts as a blueprint, balancing mathematical precision with visual harmony.

Types of grids

We distinguish between two layers of alignment: the icon grid and the pixel grid.

Icon grid alignment: Refers to the placement of elements relative to the internal key shapes and orthogonal lines. This ensures visual balance and consistent proportions across different metaphors.
Pixel grid alignment: Refers to the alignment of paths to the actual physical pixels of the screen. This ensures that the icon remains crisp and avoids "anti-aliasing" (blurriness).

Icon grid alignment (A) and pixel grid alignment (B)

Elements of the SAP icon system grid

The grid is a combination of four essential elements that construct one unified form:

Pixel unit grid: The foundational 1x1 coordinate system that ensures every point of the vector sits on a whole number.
Orthogonal lines: Vertical, horizontal, and 45° diagonal axes used to maintain structural integrity and consistent angles.
Key shapes: Standardized geometric templates (circles, squares, and rectangles) that provide a footprint for the icon's primary mass.
Margins: The "safe zone" around the edges of the 16x16px container that prevents the icon from touching the bounding box.

Generally, we try to snap every point perfectly to the pixel unit grid. When technical snapping noticeably harms the visual result, we prioritize visual appearance over perfect technical alignment.

Color

Core color tokens

We categorize our icon colors based on their functional role within the interface:

A: Interactive icons: These tokens are used for actionable elements like buttons, navigation items, and clickable tools.

B: Inverted icons: Specifically designed for use within contrast statements or dark backgrounds. These tokens ensure the icon remains legible when placed on top of primary brand colors or dark UI surfaces.
C: Non-interactive icons: Applied to purely decorative icons that do not trigger an action. These typically have a lower visual weight to distinguish them from clickable elements.
D: Marker icons: Used for marker icons (such as the object marker icons).
E: Rated/unrated content: Specialized tokens for feedback systems, such as star ratings. These provide a clear visual distinction between active (filled/rated) and inactive (outlined/unrated) states.
F: Semantic use cases (message and status): These icons vary in color depending on the functional state of the message or object state (negative, critical, positive, information or neutral).

Icon color examples

Accessibility

Icons must be usable by everyone.

Requirements

Provide accessible names for all icon-only controls.
Hide decorative icons from assistive tech.
Accompany icons that convey meaning with text or labels.
Ensure sufficient color contrast.

Never assume an icon’s meaning is universally understood.

For more information, see Accessibility in SAP Fiori and the Accessibility Design Tools Handbook.