Harsha Vardhan N
SF Symbols are a set of iconography designed by Apple for use in iOS, macOS, and other Apple platforms to create consistent and scalable icons in apps. If you’re trying to use them in your designs, here is a quick demonstration to get you covered.
Use SF Symbols in Figma
- Open the browser and navigate to Apple’s SF symbols page. Next, choose the SF symbol version and download it.
- Once you’ve finished installing SF symbols, open Figma and sign in with your credentials. Then, access the existing design file you’re working from Recently viewed.
- After the new or existing design is loaded, open SF symbols. From the available symbols, click on the one you want to work with, copy it, and paste it into Figma by pressing Command + C and Command + V.
- When you paste the symbol, you will notice that it is added as text and isn’t visible.
- To make the symbol appear, click on the Typeface dropdown and search for SF fonts in the Text section of the Design tab.
- As you can see, the SF fonts aren’t installed on our Mac. To install the missing fonts, download the font from Apple Fonts.
- Once the fonts are installed, install the Figma macOS font installer to add the SF fonts to Figma.
- Now repeat Step 5, and you will have SF fonts added. Click on any SF font and increase the font size for the symbol to appear.
If you have done it right, you will have the SF symbol successfully added to Figma.
Wrapping Up
Congratulations on learning how to use SF symbols in Figma!
Adding SF Symbols may seem confusing at first, but once set up, they can be used without issues. However, keep in mind that SF Symbols aren’t compatible with Windows. The only option for Windows users is to download the symbols as SVG files and then add them to Figma.
Related Reading
How To Change All Fonts in Figma
How To Add Google Fonts to Figma
How To Use Font Awesome in Figma
