Questions tagged [sf-symbols]

SF Symbols is a font containing configurable symbols for use on Apple platforms (iOS, macOS, tvOS, and watchOS). It is also a macOS application for exploring the font, exporting symbols from the font as SVG, and creating new symbols in the style of the font. Use this tag to discuss the use of the SF Symbols font and (where applicable to programming) the SF Symbols application.

Apple announced and released the SF Symbols font and the SF Symbols application at WWDC on June 3, 2019. Apple describes the font as follows:

SF Symbols provides a set of over 1,500 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 for all weights and sizes. SF Symbols are available in a wide range of weights and scales to help you create adaptable designs.

The SF Symbols font is included in the following operating systems:

  • macOS 10.15 and later,
  • iOS 13 and later,
  • tvOS 13 and later,
  • watchOS 6 and later.

The SF Symbols app runs on macOS 10.14.4 or later. It allows browsing the SF Symbols font, exporting some symbols as SVG, and preparing modified SVG files for importation into an Xcode asset catalog.

123 questions
9
votes
2 answers

HStack with SF Symbols Image not aligned centered

I have this simple SwiftUI code. I want all symbols to be aligned centered, just like the cloud symbol. struct ContentView : View { var body: some View { HStack(alignment: .center, spacing: 10.0) { Image(systemName: "cloud.sun") …
Daniel
  • 1,473
  • 3
  • 33
  • 63
8
votes
2 answers

Is there a way to use a specific locale for a SF Symbol which is different from the current locale?

I have an app which supports both English and Japanese locales. There, I am creating a button and set an UIImage to it, which uses a SF Symbol. let image = UIImage(systemName: "textbox")!.withConfiguration(UIImage.SymbolConfiguration(pointSize: 30,…
SamB
  • 1,560
  • 1
  • 13
  • 19
8
votes
3 answers

Way to easily show all SF Symbols icon in apps

I am working on an app that shows all the features available in SwiftUI. As part of it, I wanted to display all the SF Symbols that are available. I was wondering if there was a way to do it easily (without needing to type up all the…
Thomas Braun
  • 1,109
  • 2
  • 13
  • 27
7
votes
2 answers

UIEdgeInsets not working on System Images in TabBar

I am using XCode System Images (SF Symbols) for UITabBarItem Images. I'd like to remove the UITabBarItem Title which I have done. But also move the UITabBarItem Image down slightly. In the past when I wasn't using System Images this would work…
David Henry
  • 1,972
  • 20
  • 43
7
votes
3 answers

SwiftUI changing the color of clear part inside of SF Symbol

I am trying to change the color of clear(transparent) part inside of a SF Symbol called delete.left.fill. So far I've tried is as follows Button(action: { return }, label: { Image(systemName: "delete.left.fill") …
Faruk
  • 2,269
  • 31
  • 42
7
votes
1 answer

SwiftUI - SF Symbols Do Not Render

I'm trying to show a "plus" or "plus.app" sign via the SF Symbols in my code, but the preview to the right shows nothing. Other symbols do work like "plus.circle", is there a reason why the other symbols aren't working? Here is my view. var body:…
tomEngland
  • 103
  • 1
  • 7
7
votes
3 answers

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

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…
Paul Drees
  • 73
  • 1
  • 5
6
votes
2 answers

How Do I Fade the Top or Bottom Edge of a SF Symbol in SwiftUI?

I'm trying to recreate a visual, that consist of 3 SF Symbols. The image in the middle is 100% solid no fade. I would like to fade top edge of the top most image and fade the bottom edge of the bottom most image. I am using SF Symbols. I would like…
xp.
  • 93
  • 1
  • 7
6
votes
1 answer

SF Symbols in Map wont apply colors

I am trying to set up a Map with UIKit, using SF Symbols as Annotations. So far so good. The problem is that the symbols are black, i would like to change the color to white. annotationView.image = UIImage(systemName:…
Hasenburg
  • 63
  • 4
6
votes
3 answers

How to center a SF Symbols image vertically in UITabBarItem?

I am using SF Symbols images as tab images in my iOS app by assigning them as follows: self.tabBarItem.image = UIImage(systemName: "ellipsis") This results in all images being top-aligned, but I would like to have them centered vertically. What…
iosdeveloper
  • 195
  • 1
  • 1
  • 7
5
votes
1 answer

How to change filled icon to not filled on TabView tabItem in iOS 15 Xcode 13?

How can i change filled icon to not filled on TabView tabItem in iOS 15 Xcode 13? It seems now that the icons are filled by default... My code : import SwiftUI struct Test_Home_V: View { var body: some View { TabView { …
Flincorp
  • 751
  • 9
  • 22
5
votes
1 answer

Set a system image to NSImageView programatically in Swift

You can set a system image(SF Symbol) in UIKit with UIImage(systemName: "pencil"). For macOS apps you can set a system image in storyboard. However, I couldn't find a way to set a system image for macOS programatically. So is this possible, or is…
unknown
  • 788
  • 9
  • 24
5
votes
1 answer

adding SF Symbols to the title of UIAlert

I have a problem adding SF Symbols to the title. SF Symbols is overlap with title text can someone help me func uialert(){ let alert = UIAlertController(title: "New User Created", message: " A new user has been created.", preferredStyle:…
NinjaDeveloper
  • 1,620
  • 3
  • 19
  • 51
5
votes
2 answers

Creating an SKSpriteNode from the SF Symbols font, in a different color

I'm trying to create an SKSpriteNode with an image from the SF Symbols font, and while I can do it, I can't seem to make it any color other than black. Here's my code: let image = UIImage.init(systemName: "gear") let colored =…
Jon Grant
  • 11,369
  • 2
  • 37
  • 58
5
votes
2 answers

Check if SF Symbol exists Swift

I want to display a SwiftUI Image with a number. I might do so like this: let number = 13 Image(systemName: "\(number).square.fill") However, not every number has an SF Symbol — what if I wanted to display 134.square.fill but discovered that there…
Div
  • 1,363
  • 2
  • 11
  • 28
1
2
3
8 9