60

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?

rob mayoff
  • 342,380
  • 53
  • 730
  • 766
Julian Pomper
  • 833
  • 2
  • 7
  • 15
  • 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 ..." https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/ scroll down to **Symbols for Use As-Is** and notice the table. – Fattie Aug 07 '19 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. – Fattie Aug 07 '19 at 12:23

8 Answers8

74

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

Screenshot how to export SVG from SFSymbols app on Mac.

snibbe
  • 2,628
  • 1
  • 25
  • 31
funkenstrahlen
  • 2,712
  • 2
  • 23
  • 38
  • 1
    Thank you! Can you add an URL and the quote from the interface guidelines, so future visitors directly see that? – Julian Pomper Jun 12 '19 at 05:49
  • 3
    Not all icons in SFSymbols app can be exported. – Frank Cheng Jul 05 '19 at 01:30
  • 1
    @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 https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/ – Soheil Novinfard Oct 30 '19 at 00:57
  • 8
    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! – Crashalot Nov 15 '19 at 23:51
  • 2
    Downvoted since referenced Apple doc does not appear to actually discourage SF Symbol use in earlier OS releases. – Greg Brown Jan 09 '20 at 16:05
  • 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. – RicardoDuarte Feb 11 '20 at 22:28
  • For those wondering which 'graphics tool' to use, @user25917 suggests Figma which I found does the job of exporting to PDF nicely – Ric Santos Apr 01 '20 at 03:28
  • 3
    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. https://hotpot.ai/free-icons?s=sfSymbols – Alexei Fando Jan 07 '21 at 01:06
  • @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. – Neph Apr 20 '21 at 10:28
13

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

user25917
  • 589
  • 4
  • 12
  • 1
    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? – juliushuck Dec 28 '19 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). – user25917 Dec 30 '19 at 02:48
  • 2
    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. – coolcool1994 Jun 25 '20 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. – user25917 Mar 31 '21 at 03:24
6

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

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

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 !

Olympiloutre
  • 1,837
  • 2
  • 21
  • 33
  • 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. – Alladinian Aug 14 '19 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 – Olympiloutre Aug 14 '19 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 – Psi Sep 23 '19 at 20:50
  • @Psi 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) – Olympiloutre Sep 23 '19 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. – Psi Sep 23 '19 at 23:37
  • @Psi 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. – Olympiloutre Sep 23 '19 at 23:40
  • 2
    @Olympiloutre there is a tool to export SF Symbols to different formats - https://github.com/davedelong/sfsymbols – Max Polkovnik Oct 19 '19 at 06:23
  • @MaxPolkovnik Thanks, seems to be the easiest solution so far ! – Olympiloutre Oct 20 '19 at 03: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.) – Crashalot Nov 30 '19 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?) – Hello May 03 '20 at 11:33
  • Madness! Why not use the built-in export and use the SVG you want?? – ATV Mar 09 '21 at 09: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. – Olympiloutre Mar 10 '21 at 16:04
4

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

Holtwick
  • 1,535
  • 15
  • 23
2

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

Noah Gilmore
  • 978
  • 2
  • 12
  • 23
2

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,

Dave van Wijk
  • 21
  • 1
  • 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? – Crashalot Nov 30 '19 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! – Scotch Design Sep 28 '20 at 09:35
1

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!

Scotch Design
  • 907
  • 8
  • 8
0

There appears to be a new way to do this.

Export a SVG file from the SF Symbols app using File -> Export Custom Symbol Template.

Then create a Symbol Image Set in your Assets in Xcode and drag the SVG into it.

John
  • 737
  • 7
  • 19