How to implement Apple SF Symbols in Figma

A step by step guide on adding and using SF Symbols in a Figma project.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 06/27/2023 at 11:51
Last Updated on 09/16/2023 at 15:06
A flower that represents Figma with the text "SF Symbols" beneath it.

A step by step guide on adding and using SF Symbols in a Figma project.

SubscribeWhat are Symbols

Step One: Download SF Symbols

<p>A screenshot of Apple Developer's website showing how you can download SF Symbols.</p>

Go to Apple's website and download the latest version of SF Symbols.

Download SF Symbols

Step Two: Find the Symbol

<p>A screenshot of SF Symbols with a highlight on the search bar on the top right and on a Symbol.</p>

Open SF Symbols and search for the symbol.

Step Three: Copy the Symbol

<p>A screenshot of SF Symbols highlighting how if you right click a symbol, a menu appears that allows you to copy a symbol by clicking "Copy Symbol."</p>

Right click on the symbol and click Copy Symbol.

Step Four: Paste in Figma

<p>A screenshot of Figma showing that a symbol has been pasted but that it appears as an invisible symbol.</p>

In the Figma project, paste the SF Symbol.

The SF Symbol might appear invisible - this will be fixed in the next step.

Step Five: Change the Typeface

<p>A screenshot of Figma showing that the SF symbol is now visible. Highlighted on the right menu side bar is the "Text" inspector, where the Typeface, or font, has been set to SF Pro.</p>

Using the Text inspector on the right menu sidebar, set the Typeface to SF Pro or SF Compact.

This will cause the symbol to appear as expected.

SF Symbols operate and can be styled in the same way as text.

Please note that SF Pro and SF Compact are Variable Fonts.

How to Style Text in FigmaHow to use Variable Fonts in Figma

Looking to learn more about things you can do with Figma ?

Search our blog to find educational content on learning how to use Figma.

Search our Blog

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe