Using Xcode/Swift, how can I use an SF Symbol as a tab bar icon in assets? The asset field won't accept the .svg file

Question

I can't use an SF Symbol as an asset for a tab bar icon.

I tried using the GUI to drag and drop the file. I'm unsure of how to add it programatically.

I expected to be able to drag/drop but it won't accept the .svg file. I add a new symbol set but that doesn't work as the tab bar icon asset.

Fawn

You say drag and drop. But you also say programmatically. Those are opposites. Which do you want? The symbol has a name, so there is no need for the asset catalog. Just use the name. – Lavernelaverock

Answer 1

If you are using the new Xcode 11 beta, the new SF Symbols are already included and you do not need to import the .svg files.

Open your Storyboard file, click on the tab bar icon (not the one in the tab bar controller).

Now open the attributes inspector on the right hand side and open the combo box at "Bar Item" -> "Image". Now there will be the SF Symbols in this list as in the screenshot below.

Photography

I was able to do what you describe just fine, and the icons/symbols show up correctly in the storyboard editor just like in your screenshots. But when I go to build the project, I get a build error symbol.name not found (where “symbol.name” is the SF Symbol name, e.g., “pencil”). I’m in Xcode 11.2, and my project is set to target iOS 13.2. What do I need to do to have my project properly “include” (or whatever) the SF Symbols? – Showery

Answer 2

You can use SF Symbol from code. For quick navigation in icons collection use Apple's app from official page https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

For SwiftUI use this snippet:

.tabItem {
    VStack {
        Image(systemName: "gear")
            .font(.title)
        Text("Settings")
    }
}

Nicolanicolai

Answer 3

The following code works for setting the system icon for UITabBarItem with UIKit and Xcode 11 or 12 via Swift:

var yourTabViewController: YourTabViewController?
let iconConfig = UIImage.SymbolConfiguration(scale: .large)
let gearIcon = UIImage(systemName: "gearshape.fill", withConfiguration: iconConfig)
let settingsTabBarItem = UITabBarItem(title: "Settings", image: gearIcon, tag: 0)
yourTabViewController = storyboard.instantiateViewController(withIdentifier: YourTabViewController.identifier) as? YourTabViewController
yourTabViewController?.tabBarItem = settingsTabBarItem

Reference that helped me

Yeisk