How to use SF Symbols in iOS 12 and below?

Asked 4/6, 2019 at 18:6 Answered 2/12, 2021 at 2:51

I am updating the icons in my app. After I heard Apple released an icon font named SF Symbols with iOS 13, I was wondering if I can only use them in iOS 13 or if it is possible to use them in lower versions of iOS too.

If I want to use them, do I have to implement a fallback for older versions?

Litigable answered 4/6, 2019 at 18:6 Comment(2)

Be aware that many of the symbols can only be used to specifically link to specific Apple features. "Some symbols can be used only to reference Apple technologies ..." developer.apple.com/design/human-interface-guidelines/… scroll down to Symbols for Use As-Is and notice the table. – Ailing 7/8, 2019 at 12:21

So or example the (perfect) SFSymbols "cloud" symbol can only be used as a link to iCloud. You can't unfortunately just use it as a general "cloud" link. the (perfect) camera-like symbols can only be used as a link to FaceTime. You can't unfortunately just use it as a general "camera" link. – Ailing 7/8, 2019 at 12:23

You can not use SFSymbols natively in iOS versions older than iOS 13 (see Apple's Human Interface Guidelines for SF Symbols).

However, if you are interested in using the graphics you can use the SF Symbols app to export SVG versions of the icon. Then use some graphics tool to convert them to PNG icons you can import into your asset catalog.

Compute answered 10/6, 2019 at 12:41 Comment(9)

Thank you! Can you add an URL and the quote from the interface guidelines, so future visitors directly see that? – Litigable 12/6, 2019 at 5:49

Not all icons in SFSymbols app can be exported. – Geisel 5/7, 2019 at 1:30

@FrankCheng I think it's against apple trademark rules and your app will be rejected if you export and use them in Assets. Check "important" section in Apple's website developer.apple.com/design/human-interface-guidelines/… – Monteiro 30/10, 2019 at 0:57

Could you clarify where it says you should not use SF Symbols in older iOS releases? This quote suggests SF Symbols is not supported in older releases, but doesn't seem to discourage using the graphic versions of the icons. This is relevant for those looking to preserve a consistent look across iOS versions, as opposed to using SF Symbols in iOS 13 and different icons in older releases. Thanks! – Roughneck 15/11, 2019 at 23:51

Downvoted since referenced Apple doc does not appear to actually discourage SF Symbol use in earlier OS releases. – Dipeptide 9/1, 2020 at 16:5

Can you confirm this works? i have exported an info image with sf as svg. and it works on iOS 13, but not on 12. – Maroc 11/2, 2020 at 22:28

For those wondering which 'graphics tool' to use, @Emissive suggests Figma which I found does the job of exporting to PDF nicely – Pigeonhole 1/4, 2020 at 3:28

This free online tool allows downloading SF Symbols in png format, sliced into 3 sizes, for iOS. Just click the IOS download button to get the zip file with png slices. hotpot.ai/free-icons?s=sfSymbols – Waxman 7/1, 2021 at 1:6

@AlexeiFando Thanks, exporting works well and they're easy to import, just drag them into the assets. If you want to support both iOS 12 & 13, you can even use them as "fallback icons" by giving the imported file the same name as the iOS 13 SF icon. Unfortunately the images that are downloaded don't match regular iOS 12 icons: The "iOS" option downloads a big, bold version (no sure what "file size" to use) and with the "png" option the icon uses the right boldness but is huge and adds a ton of space on the sides. – Singley 20/4, 2021 at 10:28

You can open .svg use Figma. Then select the Regular-M and export as PDF or PNG.

Update for more details:

You can use the PDF vector assets in Xcode. So that the icon should fit any size you want. Please check this blog: https://useyourloaf.com/blog/xcode-9-vector-images/

The new Xcode has a different UI but basically the same. In the Assets Catalog:

Drag your PDF vector file in.
Check "Preserve Vector Data"
Choose "Single Scale"

Emissive answered 19/8, 2019 at 13:35 Comment(6)

I want to use the icon in a button in the toolbar but the icon has not the size like the other system icons. Is there a way to shrink the size? – Jasmin 28/12, 2019 at 18:44

@huckjulius You can use Figma to adjust the icon vector size directly. Or you can export to the PDF vector file then change size dynamically (in code). – Emissive 30/12, 2019 at 2:48

The best answer. Drag and drop the exported file from SF Symbols into Sigma and then click onto a vector image then on the right panel export. Done. – Snowshoe 25/6, 2020 at 11:52

I notice the Xcode handle PDF is not via vector but generates an image. So adjust the photo size for your needs. – Emissive 31/3, 2021 at 3:24

We still need 3 sizes, any idea how to do that in Figma? – Treacle 12/10, 2021 at 11:17

@Treacle I'm not sure which 3 sizes need you means. If the Xcode assets catalog asks for three slots. Just on the inspector panel, then select Scales: "Single Scale". Also, check the Resizing: "Preserve Vector Data". If just your needs 3 different sizes icon. Resize and export three times is working. And which I talking about is a workaround for the SF symbol. For more about PDF assets. Please check useful blog here: useyourloaf.com/blog/xcode-9-vector-images – Emissive 29/10, 2021 at 3:11

Work around in progress

I did not manage to find the solution, I gave up, but actually I went pretty far in investigating. Maybe someone luckier than me will be able to figure out hpw to continue the work I started:

In Apple documentation, it is said that, in order to easily browse all the new iOS 13 SF Symbols, you can dowmload the SF Symbols app : https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

Once instaled you can go in Application > SF Symbols > showPackage content

From there, under content > Resources we can find an interesting file named SFSymbolsFallback.ttf

And if you try to open this file on https://fontdrop.info/ you can see that it contains all the font glyphs that are released in iOS 13 as SF Font, with associated unicodes

Bingo? not so fast...

From there I tried to import this .ttf into my project in iOS 12, on XCode 10.2.1, but it seems that it is never properly imported. It is not retrievable in the list of available fonts when calling UIFont.familyNames

More interesting, if I try to import this font in Font Book app, I receive a warning that says that it contains duplication, some kind of conflict with an existing font

From there?

My guess is that there is another font that prevent SF Symbols to be installed, in Font Book and on Xcode.

One of the solution could be to find the one that is in conflict in XCode package and delete it ( this may be Symbols font or San Francisco that are causing problems idk)

I also tried to open the font file with a font editor and change its Name and family Name without success.

If anyone want to continue investigating..

Hope this can help someone !

Skullcap answered 19/7, 2019 at 4:33 Comment(12)

For what is worth, the SFSymbols app installs new versions of SF* family with much larger glyph count (~7000), so the only thing I did is to copy the symbol (as in ⌘C) from the app and paste it in a label using that font. This was for a mac app though, didn't try to test on iOS but I guess would be a matter of declaring the font in the info.plist and then use it the same way. – Mathamathe 14/8, 2019 at 11:34

When I try to add this file into the Info.plist it is not visible in UIFont.familyNames. However I havent tried to see if it actually append all these symbols to the San Francisco family. Will take a look – Skullcap 14/8, 2019 at 23:30

SFSymbol is just the name of a character subset (symbol characters) within the normal San Francisco font. If you view the San Francisco font in the builtin font viewer (on OSX), you'll see that it contains the symbols as glyphs in a specific unicode range. Therefore, of course it conflicts when you try to install it on an iOS device: You are about to replace the native system font which is certainly something that apple won't let you do – Ditmore 23/9, 2019 at 20:50

@Ditmore this is why I also tried to edit the name of the Font using a font editor. Changing the Font Family Name and other stuffs as well. However it still fails without any error log when I try to install it. (There might be an identifier I forgot to change or so) – Skullcap 23/9, 2019 at 23:36

Within the font file the font family is specified. If you didn't change the raw font data (i.e. the font family), you wouldn't have been able to install the font. – Ditmore 23/9, 2019 at 23:37

@Ditmore that is what I tried, not just changing the name of the file, but opening the ttf file and changing raw values for fontFamilyName etc... But it is painfull considering that free font editors are pretty old (those I found at least). I tried several times but it always fail. – Skullcap 23/9, 2019 at 23:40

@Olympiloutre there is a tool to export SF Symbols to different formats - github.com/davedelong/sfsymbols – Atomic 19/10, 2019 at 6:23

@MaxPolkovnik Thanks, seems to be the easiest solution so far ! – Skullcap 20/10, 2019 at 3:38

Hi @Olympiloutre. Could I email about a free alternative we built? Don't want to leave URL to avoid perception of spam. Will delete this comment once you read this. Thanks! (There was no contact info in your profile.) – Roughneck 30/11, 2019 at 23:50

@Olympiloutre i have successfully been able to import a font file into the project. but how exactly can i convert this into symbols that i can use for button images? (in the words - what is the code that replaces the "systemName" line?) – Churchwarden 3/5, 2020 at 11:33

Madness! Why not use the built-in export and use the SVG you want?? – Triennial 9/3, 2021 at 9:43

The whole point is (was, at the time) to prevent having to split your code between OS. Yes you can export it but either you only use SVg, or you use SVG prior iOS 12 and SFSymbols after. – Skullcap 10/3, 2021 at 16:4

This icon set is based on SF Symbols https://framework7.io/icons/

Youngs answered 9/10, 2019 at 8:28 Comment(0)

In SF Symbols 3.1, Edit > Copy Image as... You can choose PNG/point size/pixel scale and paste into Preview etc.

Valuation answered 2/12, 2021 at 2:51 Comment(1)

Thanks! But why the heck don't they offer PDF to import directly in Xcode? – Eupepsia 12/1, 2022 at 13:9

You can upload the new ios 13 sf-pro-rounded font to your project. Then enable that font in your label.

Open sf symbols, click on the smbol you want, cmd+c, go to your project, click on a label cmd+v. Run the project, and there should be the icon

cheers,

Hyperbolize answered 8/10, 2019 at 8:4 Comment(2)

Don't you need the SFSymbolsFallback.ttf file from the SF Symbols app? Or are you saying all the SF Symbols icons are already contained in the SF Pro Rounded font? – Roughneck 30/11, 2019 at 23:56

Thanks! I opened the Fonts app on my Mac, searched for the SF Pro Rounded font, right-clicked on the Light variant (the one I wanted) and clicked Show in Finder. I dragged that file (SF-Pro-Rounded-Light.otf) into my XCode project and ticked "Copy if necessary". I then clicked on my UIButton, set the Title to Attributed (this is important) and selected SF Pro Rounded Light as the font. I then found the icon I wanted in SF Symbols, selected it, pressed CMD+C to copy, switched back to XCode and clicked in the text part of the UIButton Title and pressed CMD+V to paste. It worked! – Candicecandid 28/9, 2020 at 9:35

SF Symbols is a system only supported on iOS 13 or later - it's not possible to use them on iOS 12 or below. You'll need to use fallbacks for those older operating systems.

See Human Interface Guidelines

Ratal answered 5/6, 2019 at 4:55 Comment(1)

Not all the SF Symbols are supported in iOS 13. There are two Mac apps showcasing symbols - one called "SF Symbols" which contains the more comprehensive set and one called "San Fransymbols" which contains the smaller set with code examples. In iOS13 only icons listen in the "San Fransymbols" app are usable. – Camillacamille 7/7, 2021 at 17:24

1. Import the font:

Open the Fonts app, search for the SF Pro Rounded font, right-click on the variant you want (e.g. Light) and click Show in Finder. Drag that file (e.g. SF-Pro-Rounded-Light.otf) into your XCode project and tick "Copy if necessary".

2. Select the font:

Select your UILabel or UIButton, set the Title to Attributed (this is important) and select the font you just copied (e.g. SF Pro Rounded Light).

3. Set the symbol:

Find the icon you want in SF Symbols, select it, press CMD+C to copy, switch back to XCode and click in the text part of the UILabel or UIButton Title and press CMD+V to paste.

A huge thank you to Dave van Wijk for the solution!

Candicecandid answered 28/9, 2020 at 9:39 Comment(1)

How to use in swiftUI project ? – Thermoluminescence 14/12, 2020 at 15:25

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags