SAP-Fiori-Design-Guidelines
Icons play a powerful role in user interface design. In SAP Fiori, icons are more than visual embellishments—they are functional, communicative, and essential to delivering a consistent, intuitive user experience. As applications become more sophisticated, so does the role of iconography. Understanding advanced SAP Fiori iconography enables designers and developers to create polished, accessible, and user-friendly SAP applications.
This article dives into the advanced concepts, best practices, and tools for using iconography effectively within the SAP Fiori design system.
Iconography in SAP Fiori refers to the system of standardized icons used throughout applications to:
SAP Fiori uses the SAP Icon Font (SAP-icons)—a scalable vector font that provides a large set of icons built specifically for enterprise use.
Each icon should serve a clear purpose. Avoid using icons purely for decoration. Icons should reinforce meaning, help users recognize patterns, and enhance usability—especially on smaller screens or in dense data environments.
Use standard SAP Fiori icons wherever possible to maintain a consistent user experience. Avoid introducing custom icons unless absolutely necessary. Consistency improves user recognition and reduces the learning curve across different SAP applications.
Choose icons that make sense in the specific business and interaction context. For example:
sap-icon://edit for editable fields or rowssap-icon://status-error to highlight a failuresap-icon://attachment to represent documentsIcons should reinforce the message, not confuse the user.
To enhance accessibility and clarity, especially for less common actions, use icons with text labels. This is recommended in toolbars, action sheets, and object pages.
Example:
<Button icon="sap-icon://add" text="Add New" />
Icon-only buttons save space but should be used with care. Provide tooltips (tooltip property) for all icon-only buttons to ensure clarity.
Best practice: Use icon-only buttons for very common actions that are well recognized (e.g., search, close).
Leverage semantic colors in combination with icons to provide immediate visual feedback:
sap-icon://accept)sap-icon://alert)sap-icon://error)Make sure these color codes align with WCAG accessibility guidelines.
If the SAP icon library does not meet your needs, you can add custom SVG icons using the IconPool or by integrating them with SAPUI5 themes. However, always check if an existing SAP Fiori icon already meets your requirements before introducing custom assets.
Icons must be accessible to all users, including those using screen readers:
tooltip or aria-label attributes for actionable icons.sap.m.Icon, sap.ui.core.IconPool, and how to manage icons programmatically.Iconography is a subtle but powerful element in SAP Fiori design. When used thoughtfully, icons enhance clarity, streamline workflows, and support accessibility. Advanced iconography practices go beyond choosing the right symbol—they include context awareness, semantic design, consistency, and accessibility. For SAP professionals working on UI/UX, mastering SAP Fiori iconography is key to building modern, intuitive enterprise applications.