How to use SF Symbols in iOS 12 and below?

Question

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 i

Answer 1

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 !

Answer 2

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!