SF Symbols Library

I’m struggling to find a plugin or template file for SF Symbols. There is currently one on Community but it doesn’t include a lot of the basic icons.

I will be adding these icons to a Design System so copy and pasting individual icons is not appropriate in this instance. Does anyone know of a file that exists where SF Symbols live, each in individual frame or as their own component?

Did you ever find an answer to this? Also would you know the easiest solution to transferring SF Symbol Font to a component?

There’s a community file which seems quite complete: Apple iOS icons in svg - SF Symbols 3.3 (multicolors) | Figma Community

However, use at your own risk, SF symbols is not open source and “your use of Symbols obtained from Apple’s SF Font is limited to creating mock-ups of user interfaces for software products running on Apple’s iOS, iPadOS, macOS and tvOS operating systems.”

just quoting :wink:

1 Like

Still not managed to sort this. I’ve found a file containing the icons as components but it doesn’t include all Symbols and is missing quite a few of the basic ones.

At the risk of taking this topic off track, instead of using SVG icons, why not just use the actual font that contains the appropriate symbol you want to use?

2 Likes

Thanks @ntfromchicago I decided to switch to using them as fonts.

My way of working, i preferred using components but once I figured the fonts out it works perfectly. Thanks

1 Like

@Rach_Garry2 using it as font should be the prefered way, because as @Lea_Delazer1 mentioned the use case is quite limited.

Are you aware of Apple Symbols App?

Yeah I understand @Chrtz . But it was my preferred way of working to use as a component. Since posting the original question I have used it as a font using the Apple Symbols app. Agree it is easier.

1 Like

Another side track / anecdote: I’m working with a large corporate design system where we still maintain icons in code as font characters. But for use in Figma and components I actually convert them back to outlines. It’s a tedious process – each time there’s a font update I grab the new characters, “type” them our in Figma, put it back on artboards and create components with the svg shapes… So if you really wanted to use them as svgs, it probably would be possible, but you’d have to type them all out at once or find them typed out and then separate the characters (the nisa plugin is perfect for that). But by converting the symbols to svg you’d loose all the great features variable fonts offer.

I’m not sure how much of it actually works in Figma with the apple characters, but I’ve seen a few of these really powerful font sets (eg. Material Symbols or the Min Icon 2.0 from the Figma Community) and maybe there will be a comeback for iconfonts and additional support in our design tool.

1 Like

@ntfromchicago How to use the SF Compact font for symbol?

You will need to use the Figma app for Mac client to access to that font, or set up your browser with the Figma fonts add-on to be able to access local fonts. You may or may not have to download the SF fonts from Apple if you don’t see them listed already.

Once you see SF Compact in your Figma font list, you can then use the SF Symbols app to copy a glyph and paste it into Figma. The glyph will appear in the weight you’ve chosen.

There is a way to use that on Windows PC?