Stack Overflow
Stack Overflow

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
4
votes
1 answer

How to use SF symbols in Swift Charts for points using symbol() modifiers?

I want to use the iOS16 Swift Charts to plot my data using the SF symbols with either symbol() or symbol(by:) modifiers. Currently, I'm using the SwiftUI view in place of the symbol - not as neat as I think it could be with symbols modifiers. Here's…
mgianzero
  • 87
  • 5
4
votes
2 answers

How do you align SF Symbols with one another in a UITableView?

In the WWDC SF Symbols video, Apple says to prefer horizontal and vertical alignment when displaying SF Symbols. Presumably, that means that each UIImageView.center.x should contain the same value so that they line up in a column. My question is how…
rickharrison
  • 4,867
  • 4
  • 35
  • 40
4
votes
2 answers

SF Symbol looks distorted

When using the new SF Symbols on a UIButton, the symbols seems to be distorted on my iPhone 8, while on an iPhone 11 Simulator everythings fine. On the iPhone 8 the symbols seems to squished horizontally making it too tall. I made a gif to…
Josh
  • 504
  • 3
  • 14
3
votes
2 answers

Swift UI shading only outside of symbol

Here are two SF symbols, one with some shading. As you can see, not only is the outside of the second symbol shaded, but so is the inside. How would I shade only the outside, leaving the inner whitespace white rather than shaded? Ideally a solution…
John Sorensen
  • 710
  • 6
  • 29
3
votes
1 answer

not found in table SymbolNameOverrides

After reopening an older project in Xcode 12.5 and updating the project settings, to get rid of the warning telling me to do so (it only updated some localization settings), I see a lot of error messages logged in the Xcode console saying [SF Symbol…
Adam Kerenyi
  • 31
  • 1
  • 3
3
votes
1 answer

SF Symbols Multicolored icons

Im making an app with weather icons, and i wanted to use apple's SF Symbols! At WWDC2020 they released multicolred ones. So my question is, why are my icons appearing in black like so: I have set the rendering mode to alwaysOriginal. And it does…
Elliot Czigány
  • 188
  • 1
  • 14
3
votes
1 answer

SwiftUI TabBar Ellipsis Not Vertically Centered

I'm just getting started with a SwiftUI app and so the first thing I'm doing is getting my navigation set up. I'm starting with a very simple TabBar using all default stuff, including SF Symbols for the icons. struct ContentView: View { var…
Bryan Deemer
  • 743
  • 1
  • 6
  • 18
3
votes
1 answer

SF Symbols resizing in SwiftUI to same size doesn't look correct

I am displaying a row of various SF Symbols in my App and want to resize them to be buttons. However as SF Symbols don't start out at the same size, when I resize them all up to 44x44 some appear too large. I could size them differently depending on…
Brett
  • 1,647
  • 16
  • 34
3
votes
0 answers

SF Symbol Tint Color Not Working For Cosmos View

I am using Cosmos View to show an array of 'stars' here I have set up the view in my cell and I would like to use SF Symbols for the star image. However, the tint colour isn't working here's my code below, I don't know if I'm missing…
David Henry
  • 1,972
  • 20
  • 43
3
votes
2 answers

SF Symbols not loading into UIImageView

I am creating an app for tracking health information, and I would like to use the two arrow images from SF Symbols. Unfortunately, no matter what I try, these symbols will not show up. I have already tested the code with an image from the Assets…
dreese33
  • 33
  • 5
2
votes
1 answer

Can we use SF Symbol on Android device in Jetpack Compose project?

I am creating a project and using Swift for iOS, Jetpack Compose for Android. But icons on Android (Material+Icons) are difference with iOS. So I would like to use SF Symbols of iOS for Android. I researched and did not find any result for…
Binh Ho
  • 3,690
  • 1
  • 31
  • 31
2
votes
1 answer

SF Symbol Images Different Sizes

I am using SF Symbols in an app and discovering that they all render at different sizes, which makes lists of elements hard to align. What is the best way to make sure SF Symbols display at the same size, so they all line up and other elements line…
keegan3d
  • 10,357
  • 9
  • 53
  • 77
2
votes
2 answers

How to replace SFSymbol icon transparent color with white color

Currently, I am using CALayer to achieve ripple effect. However, the transparent color in SFSymbol causes an issue. I am using the following way to setup UIImageView imageView.image = UIImage(systemName: "mic.circle.fill") imageView.tintColor =…
Cheok Yan Cheng
  • 47,586
  • 132
  • 466
  • 875
2
votes
1 answer

How to size a symbol image in an attributed string

I have a label where I am trying to put a symbol image at the start of the label and then some text after it. This works, but the symbol image never changes size. It doesn't matter what size I provide in the UIImageSymbolConfiguration, it stays…
ashipma
  • 423
  • 5
  • 15
2
votes
2 answers

SF Symbols lost color in iOS 15 widget

Multicolor SF symbols are black in iOS 15 widget. (have a look at the attached pictures 14.5 vs 15.0) this is how it looks in the code: Image(uiImage: UIImage(systemName: getIconName(iconId: iconId))!) .resizable() .scaledToFit() …
Palejandro
  • 2,092
  • 5
  • 26
  • 38
1 2
3
…
8 9