SF Symbols

RSS for tag

Enhance your app with a set of symbols that integrate seamlessly with the San Francisco system font.

Posts under SF Symbols tag

40 Posts
Sort by:

Post

Replies

Boosts

Views

Activity

Is the new iPadOS/macOS 26 help icon available in SF Symbols?
Under macOS 26 and iPadOS, the Help menu in many cases has a menu item for "App Help". This item has the following icon: I need to use this in my own app. I am unable to find this icon in SF Symbols 7 beta. I've scanned all of the icons under "What's New". I've searched for "help", "light", and "bulb" and this icon does not appear. Does anyone know if it's even a new SF Symbol? Or does anyone know of a way to use this icon?
2
0
111
1w
SF Symbols Variable Draw without the background.
Is it possible to use the new variable draw feature for a custom SF Symbol without it leaving the background behind it when it is not drawn? I am trying to make a tally icon that is drawn with the variable draw, but it doesn't look good if the tally is visible in the background before it is drawn.
Topic: Design SubTopic: General Tags:
0
0
46
3w
How to create a custom SF Symbol using Affinity Designer
When I first tried to create a custom SF Symbol using Affinity Designer, I encountered difficulties because of two problems which have cumulated: SVG files created by Affinity Designer cannot be directly imported into the SF Symbols app because Affinity Designer totally recreates the content of tag <g id="Notes">, making so the file incompatible for later import into the SF Symbols app. So I had to manually fix that tag via a text editor in order to make the file compatible with the SF Symbols app. Because I was so focused on fixing manually the SVG file, I did not see that the actual content of my SVG file did not follow all Apple recommendations. As a consequence, I have posted this question on the forum: Struggling creating a custom SF Symbol: The provided variants are not interpolatable Finally I have found a way to create an SVG file compatible with SF Symbols using Affinity Designer, meeting the Apple recommendations, and at last perfectly suitable for further use in Xcode. You will find the solution in my reply to this post below which is actually a quasi copy/paste of my final own reply to my original post. Marc
Topic: Design SubTopic: General Tags:
1
0
91
3w
Struggling creating a custom SF Symbol: The provided variants are not interpolatable
Hi, I am trying to create a custom SF Symbol from an SVG file created with Affinity Designer but, even though my SVG file look perfect in Firefox for example compared to the exported custom.circle.svg file (as recommended in Apple's documentation), I fail to get rid of this error: "The provided variants are not interpolatable" My creation process using Affinity Designer is: Export as SVG file Duplicate the custom.circle.svg file exported from the SF Symbols app In the new file, replace the 3 "path" tags in the "g" sections "id="Black-S", "Regular-S", "Ultralight-S" with the paths from the SVG file exported from Affinity designer Set the 3 transform matrices to "matrix(1 0 0 1 0 0)" for the 3 variants to be generated at the correct location. Verify in an SVG viewer that the file looks correct. Import the file via Drag&Drop into the SF Symbols app. What is wrong with my file? Thank you in advance for any help, Marc mySymbol.svg.txt
Topic: Design SubTopic: General Tags:
3
0
83
Jun ’25
SF Symbols 7
Will the draw (animation) functionality of SF Symbols be available when symbols are cut/pasted into a Keynote presentation? Better yet, will the draw tools from SF Symbols 7 be available in Keynote for objects created in Keynote?
Topic: Design SubTopic: General Tags:
1
0
115
Jun ’25
How can one suppress SF Symbol deprecation warnings?
Xcode 16 insists on showing deprecations of this type: Some.xib SF Symbol 'doc.on.doc' is deprecated, use 'document.on.document' instead. The problem is that the XIBs in question are set with a Deployment Target of macOS 12, where "document.on.document" actually isn't available and produces a missing image. So the warnings are wrong, as they ignore the deployment target set on the XIB. I filed a bug against this long ago and it was ignored. Having given up... does anyone know how to disable this particular warning?
0
0
56
May ’25
I found SwiftUI SF Symbols bug from WWDC24
Summary: At WWDC24, a new transition was introduced by the Apple Design team (.contentTransition(.symbolEffect(.replace))) I was writing a post about it on my LinkedIn (https://www.linkedin.com/in/alex-fila/), and out of curiosity I tried multiple symbols with slashes. Many of them were not well center aligned during a new symbol effect. Some of the examples are: "speaker.fill" : "speaker.slash.fill”, "eye.fill" : "eye.slash.fill”. Please check the attached Swift file for more details and full SwiftUI View with issues. Steps to Reproduce: Create a new IOS App project in XCode. Create a new SwiftUI File. Initiate state variable: @State private var isSpeakerOn = true. Create a new image with transition: Image(systemName: isSpeakerOn ? "speaker.fill" : "speaker.slash.fill") .contentTransition(.symbolEffect(.replace)). 5. Create a switcher or set a timer with a constant variable to toggle isSpeakerOn value (see attachment file). 6. Toggle isSpeakerOn value. 7. Observe the issue (2 symbols are not well center aligned during transition). Expected Results: During transition .contentTransition(.symbolEffect(.replace)) 2 SF symbols ("speaker.fill" : "speaker.slash.fill”) are well center aligned. Actual Results: During transition (when slash slowly appears on top of SF symbol), the main symbol is moved a few points up, creating a decentralized effect and making the user experience feel inconsistent. Notes: There are 200 SF Symbols with .slash that might be affected. It happens on latest Xcode and macOS versions, and could be a top priority for the Apple Design Team. import SwiftUI struct BUG: View { @State private var isSpeakerOn = true let timer = Timer.publish(every: 1.5, on: .main, in: .common).autoconnect() let columns = [ GridItem(.flexible(), spacing: 20), GridItem(.flexible(), spacing: 20) ] var body: some View { LazyVGrid(columns: columns, spacing: 60) { Text("❌").font(.system(size: 100)) Image(systemName: isSpeakerOn ? "speaker.fill" : "speaker.slash.fill") .font(.system(size: 200)) .frame(width: 200, height: 100, alignment: .center) .contentTransition(.symbolEffect(.replace)) .symbolRenderingMode(.palette) .foregroundStyle( Color.primary, Color.accentColor) .onReceive(timer) { _ in withAnimation(.spring(response: 0.3, dampingFraction: 0.7)) {isSpeakerOn.toggle()}} Text("✅").font(.system(size: 100)) Image(systemName: isSpeakerOn ? "bell.fill" : "bell.slash.fill") .font(.system(size: 170)) .frame(width: 150, height: 150, alignment: .center) .contentTransition(.symbolEffect(.replace)) .symbolRenderingMode(.palette) .foregroundStyle( Color.primary, Color.accentColor) .onReceive(timer) { _ in withAnimation(.spring(response: 0.3, dampingFraction: 0.7)) {isSpeakerOn.toggle()}} Text("❌").font(.system(size: 100)) Image(systemName: isSpeakerOn ? "eye.fill" : "eye.slash.fill") .font(.system(size: 150)) .frame(width: 200, height: 100, alignment: .center) .contentTransition(.symbolEffect(.replace)) .symbolRenderingMode(.palette) .foregroundStyle( Color.primary, Color.accentColor) .onReceive(timer) { _ in withAnimation(.spring(response: 0.3, dampingFraction: 0.7)) {isSpeakerOn.toggle()}} } .padding(40) }} #Preview { BUG() }
2
0
252
Mar ’25
Xcode 16.2 doesn't support custom SF Symbols 6
I was trying to compile an app that contains custom SF Symbols with Template 6.0 in Xcode (using Version 16.2 (16C5032a) on my Macbook running Sonoma 14.7.3 (23H417)). However, when building, I got the error The SVG file provided for the symbol image set ’(SVG file name)‘ is not suitable: Template format 6.0 is newer than the version that this software supports (5.0) for the custom symbols' SVGs. Attempting to preview the symbols in Xcode also seems to crash and force Xcode to quit. I am assuming this is something to do with the symbols not being compatible with my Xcode version, but the problem is that it should work since I am using Xcode 16.2, the latest stable version currently. The SVGs themselves even mention "Requires Xcode 16 or greater", which means they should work. Unfortunately, I could not find anything about this online (except another old post from 2023 with no answers), so I'm at a loss. The only possible cause that I can think of is because I'm running Sonoma instead of Sequoia (I'm using an ancient Intel Macbook which doesn't support Sequoia), but the official SF Symbols website says that it requires Ventura or later. Xcode error logs (my account name is replaced with "(name)" for privacy): CompileAssetCatalog /Users/(name)/Library/Developer/Xcode/DerivedData/Cork-dbcizsqhvdnuuqbnegvmgsinlavg/Build/Products/Debug/Cork.app/Contents/Resources /Users/(name)/Cork/Cork/Assets.xcassets /Users/(name)/Cork/Cork/Preview\ Content/Preview\ Assets.xcassets (in target 'Self-Compiled' from project 'Cork') cd /Users/(name)/Cork /Applications/Xcode-16.2.0.app/Contents/Developer/usr/bin/actool --output-format human-readable-text --notices --warnings --export-dependency-info /Users/(name)/Library/Developer/Xcode/DerivedData/Cork-dbcizsqhvdnuuqbnegvmgsinlavg/Build/Intermediates.noindex/Cork.build/Debug/Self-Compiled.build/assetcatalog_dependencies --output-partial-info-plist /Users/(name)/Library/Developer/Xcode/DerivedData/Cork-dbcizsqhvdnuuqbnegvmgsinlavg/Build/Intermediates.noindex/Cork.build/Debug/Self-Compiled.build/assetcatalog_generated_info.plist --app-icon AppIcon --accent-color AccentColor --enable-on-demand-resources NO --development-region en --target-device mac --minimum-deployment-target 13.0 --platform macosx --compile /Users/(name)/Library/Developer/Xcode/DerivedData/Cork-dbcizsqhvdnuuqbnegvmgsinlavg/Build/Products/Debug/Cork.app/Contents/Resources /Users/(name)/Cork/Cork/Assets.xcassets /Users/(name)/Cork/Cork/Preview\ Content/Preview\ Assets.xcassets 2025-02-23 18:53:33.073 ibtoold[8228:157676] NSFileCoordinator is doing nothing. 2025-02-23 18:53:33.107 ibtoold[8228:157676] Template format 6.0 is newer than the version that this software supports (5.0) 2025-02-23 18:53:33.112 ibtoold[8228:157676] Template format 6.0 is newer than the version that this software supports (5.0) 2025-02-23 18:53:33.137 ibtoold[8228:157676] Template format 6.0 is newer than the version that this software supports (5.0) 2025-02-23 18:53:33.141 ibtoold[8228:157676] Template format 6.0 is newer than the version that this software supports (5.0) 2025-02-23 18:53:33.280 ibtoold[8228:157676] Template format 6.0 is newer than the version that this software supports (5.0) /* com.apple.actool.errors */ error: Template format 6.0 is newer than the version that this software supports (5.0) /* com.apple.actool.document.errors */ /Users/(name)/Cork/Cork/Assets.xcassets:./custom.spigot.badge.xmark.symbolset/[universal][][][]: error: The SVG file provided for the symbol image set ’custom.spigot.badge.xmark‘ is not suitable: Template format 6.0 is newer than the version that this software supports (5.0) /Users/(name)/Cork/Cork/Assets.xcassets:./custom.terminal.badge.xmark.symbolset/[universal][][][]: error: The SVG file provided for the symbol image set ’custom.terminal.badge.xmark‘ is not suitable: Template format 6.0 is newer than the version that this software supports (5.0) /Users/(name)/Cork/Cork/Assets.xcassets:./custom.trash.triangle.fill.symbolset/[universal][][][]: error: The SVG file provided for the symbol image set ’custom.trash.triangle.fill‘ is not suitable: Template format 6.0 is newer than the version that this software supports (5.0) /Users/(name)/Cork/Cork/Assets.xcassets:./custom.macwindow.badge.xmark.symbolset/[universal][][][]: error: The SVG file provided for the symbol image set ’custom.macwindow.badge.xmark‘ is not suitable: Template format 6.0 is newer than the version that this software supports (5.0) /* com.apple.actool.compilation-results */ /Users/(name)/Library/Developer/Xcode/DerivedData/Cork-dbcizsqhvdnuuqbnegvmgsinlavg/Build/Intermediates.noindex/Cork.build/Debug/Self-Compiled.build/assetcatalog_generated_info.plist /Users/(name)/Library/Developer/Xcode/DerivedData/Cork-dbcizsqhvdnuuqbnegvmgsinlavg/Build/Products/Debug/Cork.app/Contents/Resources/AppIcon.icns
2
1
459
Mar ’25
What does Apple use to create SF Symbols?
I've been losing countless hours of work trying to create a variable-width SF Symbol that supports interpolation, no dice. Both Sketch and Figma output SVGs that are not interpolatable. After numerous hours of research, I believe it's due to the fact that when outlining strokes, these editing tools introduce artifacts into the shapes —​ sometimes I get very short line segments where there would not be needed, sometimes a 3-point curve gets expanded to a 4-point curve, but not in all weights. It's always inconsistent. So my only question is rather simple: what's the graphic editing tool Apple uses to create hundreds of symbols? Clearly you cannot edit the stroke of ALL curves by hand, it's inhumane. Sketch? Figma? Illustrator? Inkscape? Affinity? I'd like a definitive answer from someone internal so that I can at least try to use the same tool as you without wasting more hours.
Topic: Design SubTopic: General Tags:
3
2
651
Feb ’25
How to use .symbolVariant(.contains: )
I'm getting a weird response from Xcode in trying to use symbolVariant(.contains). I also don't understand why it demands the type cast. What am I doing wrong? Here's the code as text: import SwiftUI let Variants: [SymbolVariants] = [ .circle, .square, .fill, .rectangle, .slash, .none ] func varAvail(_ image: Image) -> [SymbolVariants] { var res: [SymbolVariants] = [] for variant in Variants { if image.symbolVariant(.contains(variant)) as! Bool { res.append(variant) } } }
2
0
326
Jan ’25
Toolbar symbol rendering does not behave as expected
Hello everyone, I've been having a bit of trouble with the .symbolRenderingMode(_:) modifier. When trying to apply it to a single button in a toolbar, it does not work at all. The symbol is always rendered as monochrome. However, I've realised that with this little hack I can achieve the expected results, but this is not ideal. .toolbar { HStack { Button("", action: {}) // The hack Button("Button", systemImage: "line.3.horizontal.decrease.circle.fill", action: {}) .symbolRenderingMode(.hierarchical) .foregroundStyle(.blue) } } I've submitted a bug report (FB16129223) but in the meantime, is this my only solution ? Side note: the foregroundStyle(_:) modifier is ignored as well.
1
0
387
Dec ’24
SwiftUI: Rotate symbolEffect not working
Hello, I have the following code: struct SettingsButton: View { var action: () -> Void @State private var rotate: Bool = false var body: some View { Button(action: { rotate.toggle() action() }, label: { Image(systemName: "gearshape") }) .symbolEffect(.rotate, value: rotate) } } For some reason, my button is not rotating. Other effects such as pulse and bounce work as expected. I applied the .clockwise direction thinking it needed a direction set, but that didn't work either. I also tried using the symbolEffect with isActive, and that didn't work. Lastly, I thought there may be an issue with Xcode so I closed that and reopened, but still not working. Any ideas?
2
0
619
Mar ’25
How to do content transition when one image is a system symbol and the other is in assets catalouge?
I have a save button: Button(action: { saveTapped() }) { Label("Save", systemImage: wasSaved ? "checkmark" : "square.and.arrow.down") } .contentTransition(.symbolEffect(.replace)) .disabled(wasSaved) Now, I created a new custom icon and added it into the assets catalogue: "custom.square.and.arrow.down.badge.checkmark" for when the wasSaved state is true. The issue I am facing is that to use it I need to use the method of Label with image:, while to use the non custom symbol, I need to use systemImage:. So how is it possible to transition between the two?
1
0
474
Dec ’24
SF symbol effects don't work unless font modifier is applied
why do I need to set the font of an image of an SF symbol to get the effect to work? This should be a bug, it's bad behavior. Xcode 16.1 iOS 18.1, so frustrating. for example: this works Image(systemName: "arrow.trianglehead.2.clockwise.rotate.90.circle.fill") .symbolEffect(.rotate, options: .repeat(.continuous), value: isActive) .font(.largeTitle) .onAppear() { isActive = true } but this does not animate, which makes no sense Image(systemName: "arrow.trianglehead.2.clockwise.rotate.90.circle.fill") .symbolEffect(.rotate, options: .repeat(.continuous), value: isActive) .onAppear() { isActive = true } its the same if you use a simple setup and different font size, and whether font is before or after the symbol effect Image(systemName: "arrow.trianglehead.2.clockwise.rotate.90.circle.fill") .font(.headline) // only works if this line is here .symbolEffect(.rotate, options: .repeat(.continuous))
1
2
573
Nov ’24