Semantic Icons
Components / Semantic Icons
Intro
These guidelines outline how UX Designers should use semantic icons across SAC, DSP, and BDC.
When to Use
- Use SAP-icons for all validation icons.
- On a case-by-case basis, evaluate the placement of a semantic icon to ensure it doesn’t create any UX issues.
- Use FPA-icons for all validation icons.
Icon Types
Success Validation
Use sap-icon://sys-enter-2 for success validation icons.
Success validation icons are typically non-interactive (e.g., in message strips and SAC message toasts).
Success validation icons should always use --sapPositiveElementColor.
Success Validation Icon
Warning Validation
Use sap-icon://alert for warning validation icons.
Warning validation icons can be interactive (e.g., in data tokens) or non-interactive (e.g., in message strips and SAC message toasts).
Warning validation icons should always use --sapCriticalElementColor, regardless of interactivity.
Warning Validation Icon
Error Validation
Use sap-icon://error for error validation icons.
Error validation icons can be interactive (e.g., in data tokens) or non-interactive (e.g., in message strips and SAC message toasts).
Error validation icons should always use --sapNegativeElementColor, regardless of interactivity.
Error Validation Icon
Information Validation
Use sap-icon://information for information validation icons where the information is directly relevant to user actions but not critical.
Information validation icons can be interactive (e.g., in data tokens) or non-interactive (e.g., in message strips and SAC message toasts).
Information validation icons should always use --sapInformativeElementColor, regardless of interactivity.
Information Validation Icon
Contextual Information / Help
Use sap-icon://hint for information icons that offer additional context or general assistance.
Interactive help icons (e.g., info popovers) should use --sapButton_IconColor.
Non-interactive help icons (e.g., info labels) should use --sapContent_NonInteractiveIconColor.
Refer to the ControlInfoIcon common control for implementation guidelines.
Info Popover
Info Label