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.

Thinker

Is there a reason you wish to use NSImage instead of Image? After all, you're using SwiftUI. – Accord

It doesn't matter whether he wants to use Image or NSImage, because neither supports the init(systemName:) initializer on macOS. – Anissa

Answer 1

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.

Spraggins

Why does Xcode not recognize this initializer when I try to use it? – Accepter

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? – Accepter

After updating to Xcode 12.2, the symbol showed up. That's the minimum version for this API. – Accepter

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 and the other an initializer). – Spanker

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! – Fancied

Answer 2

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.

Vogeley

Probably that's what I will be going for. Thanks for the tip! – Thinker

I solved this issue in here – Celtuce

How to support San Francisco Fonts on old iOS app and macOS burcugeneci.wordpress.com/… – Celtuce

@VictorKushnerov Export the symbols as images, scale them as needed and add them to your asset catalog. – Vogeley

@Vogeley Different devices have different dpi. I prefer to use vector images to render high quality on all devices. – Celtuce

@VictorKushnerov You must find a way for yourself. SF Symbols are not supported on iOS 12 and earlier. – Vogeley

@Vogeley You can download San Francisco font from Apple and use it on iOS 12. See my answer how to do it. – Celtuce

Is it legal to download an SF symbol and use it in my mac application? Or does that break the apple developer agreements? – Packard

Yes you can use it (except the forbidden symbols) – Vogeley

Answer 3

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.

Afterburning

Answer 4

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)")
    }
}

Vomer

Answer 5

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/

Succeed

Answer 6

If your macOS version is below macOS 11.

1. Download sfsymbols and export all of symbols https://github.com/davedelong/sfsymbols

2. Select Assets.xcassets in your Xcode project

3. Drag an iconset folder as new asset to your Assets.xcassets in Xcode

Seabrook

Answer 7

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

Celtuce

This won't work unless you ask all of your users to install the font. – Depurative

Yep, just used them like this in an App and noticed they look like question marks in Apple reviewer's machine. – Presbyterial