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
174
votes
10 answers

Find all available images for Image(systemName:) in SwiftUI

Where can I find all the system images that are available in the initializer Image(systemName:)? I've only been using "chevron" and "star.fill" so far, as discovered in Apple's SwiftUI tutorial series. However, I haven't been able to find a full…
LinusGeffarth
  • 27,197
  • 29
  • 120
  • 174
123
votes
5 answers

How do I set the size of a SF Symbol in SwiftUI?

How do I set the size of a SF Symbol in Xcode 11 using SwiftUI?
Ryan
  • 10,798
  • 11
  • 46
  • 60
111
votes
8 answers

How do I set a weight to SF Symbols for iOS 13?

I have this Image(systemName: "arrow.right") But how do I make it bold, semibold etc? I am using the new SwiftUI.
Just a coder
  • 15,480
  • 16
  • 85
  • 138
66
votes
3 answers

Change a SF Symbol size inside a UIButton

I am declaring a Button like this : let menuButton = UIButton() After that I am trying to change it's parameter and set his position on the view with the help of LBTATools (a pod) with this function: fileprivate func setMenuButtonUI() { …
Cublax
  • 1,232
  • 1
  • 11
  • 20
66
votes
8 answers

How to use SF Symbols in iOS 12 and below?

I am updating the icons in my app. After I heard Apple released an icon font named SF Symbols with iOS 13, I was wondering if I can only use them in iOS 13 or if it is possible to use them in lower versions of iOS too. If I want to use them, do I…
Julian Pomper
  • 923
  • 2
  • 7
  • 15
47
votes
4 answers

Is it possible to use SF Symbols outside of UIImage?

I'm confused on how to use SF Symbols in text in an iOS project. I have a UIButton that uses a symbol just fine using UIImage systemImageNamed:. I would like to display a message about that button with some text in another view. I thought I should…
Gene McCulley
  • 1,097
  • 1
  • 10
  • 15
45
votes
7 answers

How to change SF Symbol icon color in UIKit?

In SwiftUI, you can change the icon's color using foregroundColor modifier: Change the stroke/fill color of SF Symbol icon in SwiftUI? Is there a way to change the color in UIKit? I looked up the documentation and didn't find anything related to…
francisfeng
  • 704
  • 1
  • 8
  • 22
45
votes
8 answers

Change the stroke/fill color of SF Symbol icon in SwiftUI?

I am looking for a way to change the stroke / fill color of an SF Symbol icon in SwiftUI. I have tried .background(Color.red) but that just changes the background of the whole icon (no change is applied to the actual icon itself) as implied. I also…
Taylor Miller-Klugman
  • 453
  • 1
  • 4
  • 6
21
votes
3 answers

Use SF Symbols system image for static UIApplicationShortcutItem

When specifying home screen quick actions, UIApplicationShortcutItems, in your Info.plist, is there a way to use a system image from SF Symbols? The docs noting the available iOS keys doesn't specify a key to do this, besides specifying one of the…
Jordan H
  • 52,571
  • 37
  • 201
  • 351
20
votes
7 answers

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

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…
fankibiber
  • 729
  • 1
  • 6
  • 19
19
votes
1 answer

SF Symbols Hierarchical, Palette, and Multicolor rendering mode colors?

At WWDC 2021 Apple announced SF Symbols 3, which will support new multi-color SF Symbols in iOS 15 and macOS 12. New color-rendering modes that add depth and emphasis to a symbol through layer…
pkamb
  • 33,281
  • 23
  • 160
  • 191
14
votes
3 answers

Is there a way to use the apple SF Symbols on the web

I am trying to make a website and was hoping to use Apple's SF Symbols for some icons, however I can not find a way to get SF Icons onto a website, I downloaded the app and copied the icon however on the website it shows a blank square. Any help…
Samo2120
  • 179
  • 1
  • 2
  • 11
11
votes
4 answers

Resizing UImage when using SF Symbols - UIImage(systemName:)

I have the following pre-packaged, system SF image: UIImage(systemName: "location.fill") It may seem trivial, but how can I resize it to make it bigger? Thank you.
Ludovico Verniani
  • 157
  • 1
  • 8
11
votes
4 answers

Inverted mask swiftui with system image

I am trying to cut out a sf symbol from a circle shape in swiftUI. I currently have the following code: Circle() .fill(Color.white) .frame(width: 50, height: 50) .mask( Image(systemName: "play.fill") .font(.system(size:…
Sake Salverda
  • 625
  • 1
  • 6
  • 17
9
votes
2 answers

How to format customized SF-Symbols SVG files for import into Xcode11

Has anyone figured out how to create customized SF-Symbols using the techniques outlined in the WWDC video, the only existing documentation that I can find on the subject? According to the video one can simply edit the exported SVG file and reimport…
Brandon C.
  • 410
  • 4
  • 8
1
2 3
…
8 9