Introduction
Have you encountered the challenge of finding suitable icons to enhance the clarity of your SAP Analytics Cloud stories or to design more intuitive buttons in your analytic applications?
Fortunately, the ‘SAP Icons as Font’ feature was introduced in version 2025.QRC 2 allows you to bypass image uploads and seamlessly integrate any icon you need into your SAP Analytics Cloud stories.
SAP offers an open-source icon font list with more than 700 business icons. The list can be accessed through the icon explorer.
SAP icons work just like any regular font, but instead of Characters, you get icons, Symbols, and Codes. By adding them to the story, you can easily use any icon directly in a text field or on a button, eliminating the need to upload image files. You can also style them just like text: adjust the size, change the color, and align them however you like.
Let’s explore how to add icons to your story to enhance its visual appeal.
How to Add Icons to Your Story
Start by navigating to the Font menu in your widget design interface. There, you will find the “SAP Icons” option, which grants access to a variety of icons designed to enrich your content.
By selecting SAP Icons, you’ll be taken to the icon explorer page. This page showcases a wide range of icons, allowing you to find the perfect graphic for your narrative.
You have three primary methods for selecting an icon:
- Icon: Icons are used to reinforce important information. Browse a selection of visual icons that represent various concepts. Click on any icon that aligns with your content to integrate it into your design.
- Symbol: Choose from an array of symbolic representations. Symbols convey meaning efficiently, helping to illustrate ideas and emotions without additional text.
- Unicode: Unicode serves as a unique identifier for each icon. Use the Unicode option to input specific character codes. This makes it easy for developers to reference and embed icons directly into code using CSS/HTML.
After selecting your icon, strategically incorporate it into your story to emphasize key points and enrich the viewer’s experience. Thoughtfully integrated icons enhance your storytelling, making it more engaging and memorable.
Copy the Icon/Symbol/Unicode with the button provided next to the options. In this example, it is Symbol: –
You can adjust the Size/Color from the highlighted section, as seen below.
Here is an example with a button in an Optimized Design Experience Story.
Good design is as much about clarity as it is about aesthetics, and icons are a vital part of that balance. SAP’s icon font approach gives you the flexibility to integrate visual cues that align with your brand and functionality, all while supporting accessibility and responsive design. It’s a small detail that contributes to a much larger impact on user satisfaction.
Now that you understand how to implement SAP Icons as fonts, take the next step and bring them into your project.
