How to implement Apple SF Symbols in Figma

Oscar de la Hera Gomez
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.

Step One: Download SF Symbols

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

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

Step Two: Find the Symbol

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

Open SF Symbols and search for the symbol.

Step Three: Copy the Symbol

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."

Right click on the symbol and click Copy Symbol.

Step Four: Paste in Figma

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

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

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.

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.

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

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

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.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details