Is there a way to use SF Symbols in macOS SwiftUI development?

Question

SF Symbols provides a set of over 2,400 consistent, highly configurable symbols you can use in your app. Apple designed SF Symbols to integrate seamlessly with the San Francisco system font, so the symbols automatically ensure optical vertical alignment with text in all weights and sizes.

https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

As far as I can see, macOS does not support NSImage(systemName: String) syntax when trying to use SF Symbols in a macOS project.

To be specific, I was trying to use an SF Symbol glyph on a toolbar item.

Is there a reason you wish to use `NSImage` instead of `Image`? After all, you're using `SwiftUI`. — , Sep 24 '19 at 14:36
It doesn't matter whether he wants to use `Image` or `NSImage`, because neither supports the `init(systemName:)` initializer on macOS. — rob mayoff, Sep 24 '19 at 15:55

score 20 · Accepted Answer · edited Oct 15 '20 at 19:40

20

SF Symbol are now available with macOS 11.

SF Symbols are available in iOS 13 and later, macOS 11 and later, watchOS 6 and later, and tvOS 13 and later.

Here is how you use it:

NSImage(systemSymbolName: "hammer", accessibilityDescription: nil)

If you want to support macOS 10.15 and below you have to use the SF Symbols Mac app and export the symbol as SVG and import it back to an asset file in your Xcode project. You can get the app from here.

edited Oct 15 '20 at 19:40

pkamb

33,281
23
160
191

answered Aug 30 '20 at 17:30

Daniel

1,473
3
33
63

Why does Xcode not recognize this initializer when I try to use it? – Peter Schorn Nov 19 '20 at 06:52
I'm on Xcode 12.1 and macOS 11. I'm guessing that I need Xcode 12.2 or 12.3. What version are you on? – Peter Schorn Nov 19 '20 at 07:25
2

After updating to Xcode 12.2, the symbol showed up. That's the minimum version for this API. – Peter Schorn Nov 26 '20 at 08:38
Compiling for macOS 11.1, Xcode wouldn't complete systemSymbolName for me. I used `NSImage *image = [NSImage imageWithSystemSymbolName:@"hammer" accessibilityDescription:nil];` (maybe I had the wrong objc syntax since once is a [type method](https://developer.apple.com/documentation/appkit/nsimage/3622472-imagewithsystemsymbolname) and the other an [initializer](https://developer.apple.com/documentation/appkit/nsimage/3622472-init)). – idbrii Feb 18 '21 at 23:27
It's giving a bad example when giving `nil` to the `accessibilityDescription:` argument! People blindly copy/paste this. In order to support people with vision impairements, you should pass a useful (and localized) text that users can read with VoiceOver! – Thomas Tempelmann Aug 31 '21 at 15:49

vadian · Answer 2 · 2019-10-23T10:49:58.913

14

SF Symbols is not supported on macOS (yet)

But you can download the SF Symbols App and export the symbols you need as stand-alone images.

edited Oct 23 '19 at 10:49

answered Sep 24 '19 at 20:38

vadian

274,689
30
353
361

Probably that's what I will be going for. Thanks for the tip! – fankibiber Sep 25 '19 at 08:41
I solved this issue in [here](https://stackoverflow.com/questions/58172532/initsystemname-is-unavailable-in-macos) – Victor Kushnerov Sep 30 '19 at 19:30
How to support San Francisco Fonts on old iOS app and macOS https://burcugeneci.wordpress.com/20151228apples-brand-new-system-font-san-francisco/ – Victor Kushnerov Oct 14 '19 at 05:26
@VictorKushnerov Export the symbols as images, scale them as needed and add them to your asset catalog. – vadian Oct 15 '19 at 10:23
@vadian Different devices have different dpi. I prefer to use vector images to render high quality on all devices. – Victor Kushnerov Oct 15 '19 at 10:56
@VictorKushnerov You must find a way for yourself. SF Symbols are not supported on iOS 12 and earlier. – vadian Oct 15 '19 at 11:09
@vadian You can download San Francisco font from Apple and use it on iOS 12. See my answer how to do it. – Victor Kushnerov Oct 15 '19 at 11:16
Is it legal to download an SF symbol and use it in my mac application? Or does that break the apple developer agreements? – Steven W. Klassen Feb 17 '20 at 19:10
Yes you can use it (except the *forbidden* symbols) – vadian Feb 17 '20 at 20:17

score 2 · Answer 3 · answered Sep 24 '19 at 20:28

2

SF Symbols are unavailable on macOS. From Apple's Human Interface Guidelines:

You can use SF Symbols in apps running in iOS 13 and later, watchOS 6 and later, and tvOS 13 and later.

answered Sep 24 '19 at 20:28

LuLuGaGa

13,089
6
49
57

score 0 · Answer 4 · answered Mar 02 '20 at 12:30

There is no way yet to use SF symbols on macOS. However you can use this extension as a fall back on macOS so your code will run on multiple platforms.

extension Image {
    init(systemName: String) {
        self.init("YOUR FALL BACK IMAGE(s)")
    }
}

score 0 · Answer 5 · answered Oct 15 '20 at 19:34

0

You could also export the symbol from SF Symbols app into SVG and convert them into SwiftUI Shape using this tool: quassummanus.github.io/SVG-to-SwiftUI/

answered Oct 15 '20 at 19:34

Antoni Silvestrovič

985
8
25

score 0 · Answer 6 · answered Oct 22 '20 at 09:33

0

If your macOS version is below macOS 11.

Download sfsymbols and export all of symbols https://github.com/davedelong/sfsymbols
Select Assets.xcassets in your Xcode project
Drag an iconset folder as new asset to your Assets.xcassets in Xcode

answered Oct 22 '20 at 09:33

webcpu

3,174
2
24
17

Victor Kushnerov · Answer 7 · 2019-10-14T05:28:57.473

-4

Important Before use code bellow read this article How to support San Francisco Fonts on old iOS app and macOS

Button(action: {}) {
  Image(systemName: "star")            
}

I make Image for macOS like below

that's how it looks on macOS

And for cut/paste:

import SwiftUI

#if os(macOS)
struct Image: View {
  let symbol: String

  init(systemName: String) {
    self.symbol = [
      "speaker":      "",
      "speaker.fill": "",
      "star":         "☆",
      "star.fill":    "★"
      ][systemName] ?? "?"   }

  var body: some View {
    Text(symbol)
  }
}
#endif

edited Oct 14 '19 at 05:28

answered Sep 30 '19 at 21:10

Victor Kushnerov

3,706
27
56

3

This won't work unless you ask all of your users to install the font. – user4992124 Nov 11 '19 at 21:06
1

Yep, just used them like this in an App and noticed they look like question marks in Apple reviewer's machine. – OwlOCR Feb 24 '20 at 05:26

Is there a way to use SF Symbols in macOS SwiftUI development?

7 Answers7

Linked