Introduction
For any new icon going in the application which is not already a part of the FPA-icon font, this must go through the formal icon request process. Please see steps to requesting an icon down below.
Steps to Download Icon Font (Mac)
This gives a step by step walk through for how to download the FPA-icon font and install it in the MAC Font Book. Once installed it can be used in various desktop programs.
Steps to Set up Icon Font in Figma (MAC)
This gives a step by step walk through for how to set up an Icon Font picker so that you can accelerate your workflow for picking icons while creating mockups in Figma. There is no more need to copy over icons from sketch into Figma for use.
SAP Icon Browser (Figma Plugin)
The Figma plugin "SAP Icon Browser" brings the functionality to search and use icons into Figma.
How to Request an Icon
If you're working on new features or use cases for SAP products, you might need a new icon. However, before requesting a new icon, please make sure that you have thoroughly checked the article.
If you have any questions about requesting icons please contact Florian.
How to Install
This is the SAP Analytics Cloud and Data Warehouse Cloud Icon Font Repository. Here you will be able to see the icons and the descriptions for where we use these icons in the products.
You can easily download the latest icon font onto your computer from the FPA icon repository. After downloading the package, you will see the download starting at the bottom of your browser. Make sure that the version title of the downloaded icon font matches the version title at the top of the icon repository.
If you are a developer and you need the cherry pick git link for your feature, navigate to the cherry pick link to include the most recent FPA-icon font in your code. This brings you to JIRA and you can find the git link in the comments at the bottom of the screen.
Turn on the repertoire for the font book. This is important because you will be able to see all the icons in the icon repository.
Right-click on the row you want to update. This is important because you need to delete the current version of the FPA-icon font first before installing a new one.
Select “Remove” in the dialog box that opens. Close the Font book and reopen it. This refreshes the font book and clear any memory of the old icon font. If “remove” is the text on the interface, it should be capitalized.
You should see that the FPA-icons is no longer in the font book. Click the Red Close Button in the top left-hand corner and reopen it just to be safe.
Go to your folders. Find the FPA-Icon zip file that you have downloaded from the guidelines page. Start off by checking the title of the folder to see if you are in the correct version of the icon font.
Open the “fonts” section of the folder and click on “FPA-icons.tff”. A second dialog box opens and you are asked to install the font.
Click on “Install Font”. Your font book opens and the FPA-icon appears.
You can see the FPA-icons title in the list of fonts of the font book.
In order to check if this has worked, scroll-down to the bottom of the repository and check if the new icons are showing up at the bottom of the repository list. If the icons do not appear, try closing your font book and reopening it again. Then, check at the bottom of the list if it has been updated.
Set Up in Figma
Ensure you the have FPA font installed into your computer. If you haven’t installed FPA font yet please follow the instructions here.
Create a new design file.
Open Figma Assets Tab in top of the left side panel.
Click on the book icon to see the libraries available.
Search for “FPA Icon Font Library” to find the correct icon library.
Click on the toggle to activate the icon library.
Once you turn on the toggle, it should be available on the left side panel. To use, you can double click on the icon or drag it into your artboard. If you have other libraries, scroll down to see the new library added.
Tips for Icon Usage in Figma
Clicking on the list icon shows list vs icon view.
List View:
with list view, the icons are alphabetically sorted in the side menu. the names next to the icons are the CSS class names which are used for the icons. These CSS class names are all unique and are what the developers use when calling specific icons to place in their code.
Grid View:
grid view is good when you know what the icon that you are looking for looks like and need to quickly sift through the repository.
You can easily look for icons by the name of the function or what the icon looks like.
Drag an icon into the working area and then click the colour section on the right panel to choose a colour.
Drag an icon into the working area, copy and paste icon into component.
Troubleshoot in Figma
Ensure that the font selected is FPA-icons font.
In the example below, the font which is selected in the right side panel is font 72. This is the reason why a blank square could be appearing in view. This could be due to the FPA-icon font not being installed or the 72 font selection being carried over into this icon widget while working.
Simply, select the icon which you want to have appear and switch the font selection to be FPA-icons in the side panel.
Make sure when you import components from sketch files, the icon is centered.
All icons in our FPA-icon font are centered, however, when placed inside a component or when resized in Figma, this can change. This can be edited via the Figma right side panel in the Text section.
