I seem to be having an issue where certain symbol effect animations are not working. Using symbol effect .appear, .drawOn .drawOff seems to cause the symbol to not display at all.
Am I using this code correctly if I want to have a simple animate repeatedly on display?
Specifically, modifying the Multiplatform app template in xcode:
Image(systemName: "ellipsis")
.font(.title)
.foregroundColor(.blue)
.symbolEffect(.drawOn.byLayer, options: .repeat(.continuous))
I'm currently on the latest release on Xcode/macOS and iOS/macOS on client. Both iOS and macOS seem affected. The project is multiplatform and only support macOS/iOS 26.
SF Symbols
RSS for tagEnhance your app with a set of symbols that integrate seamlessly with the San Francisco system font.
Posts under SF Symbols tag
36 Posts
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
Why?
Why stop there? (Why not ipod.and.imacg3? applenewton.and.vision.pro?)
I get why the older ipod symbols exist but these new pairings are odd.
If anyone ever sees these restricted symbols in the wild, or even just someone using a Vision Pro and an iPod (Touch) together in a way that's not contrived, please do let me know!
I tried playing with SF Symbols variable value draw from the first iOS 26 beta and it has never been working, whereas the SwiftUI version works properly.
I just copied and pasted the code from the related video What’s new in SF Symbols 7 and it simply doesn't work (screenshot attached). Full view controller code is at the end of the post.
imageView.image = UIImage(systemName: "thermometer.high", variableValue: 0.5)
imageView.preferredSymbolConfiguration = UIImage.SymbolConfiguration(variableValueMode: .draw)
Am I missing something? Or is it still not ready? I reproduced the issue with Xcode 26 beta 6 (17A5305f). The release candidates are approaching fast and I am worried this will not be working by then.
The feedback ID is FB18898182.
class ViewController: UIViewController {
let imageView = UIImageView()
override func viewDidLoad() {
super.viewDidLoad()
imageView.image = UIImage(systemName: "thermometer.high", variableValue: 0.5)
imageView.preferredSymbolConfiguration = UIImage.SymbolConfiguration(variableValueMode: .draw)
.applying(UIImage.SymbolConfiguration(font: .systemFont(ofSize: 40)))
view.addSubview(imageView)
imageView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])
}
}
[Also submitted as FB20225387]
When using a custom SF Symbol that combines a base symbol with a badge, the symbol doesn’t stay vertically centered when displayed in code. The vertical alignment shifts based on the Y offset of the badge.
There are two problems with this:
The base element shouldn’t move vertically when a badge is added—the badge is meant to add to the symbol, not change its alignment.
The badge position should be consistent with system-provided badged symbols, where badges always appear in a predictable spot relative to the corner they're in (usually at X,Y offsets of 90% or 10%).
Neither of these behaviors match what’s expected, leading to inconsistent and misaligned symbols in the UI.
Screenshot of Problem
The ellipsis shifts vertically whenever the badge Y offset is set to anything other than 50%. Even at a 90/10 offset, it still doesn’t align with the badge position of the system "envelope.badge" symbol.
SF Symbols Export
This seem to be a SwiftUI issue since both the export from SF Symbols is correctly centered:
Xcode Assets Preview
And it's also correct in the Xcode Assets preview:
Steps to Repro
In SF Symbols, create a custom symbol of "ellipsis" (right-click and Duplicate as Custom Symbol)
Combine it with the "badge" component (select Custom Symbols, select the newly-created "custom.ellipsis", then right-click and Combine Symbol with Component…)
Change the badge's Y Offset to 10%.
Export the symbol and add it to your Xcode asset catalog.
In Xcode, display the symbol inside a Button using Image(“custom.ellipsis.badge”).
Add a couple more buttons separated by spacers, using system images of "ellipsis" and "app.badge".
Compare the "custom.ellipsis.badge" button to the two system symbol buttons.
Expected
The combined symbol remains vertically centered, matching the alignment shown in both the SF Symbols export window and the Xcode asset catalog thumbnails.
Actual
The base symbol (e.g., the ellipsis portion) shifts vertically based on the Y offset of the badge element. This causes visual misalignment when displayed in SwiftUI toolbars or other layouts. Also included the system “envelope.badge” icon to show where a 90%, 10% badge offset should be located.
System Info
SF Symbols Version 7.0 (114)
Xcode Version 26.0 (17A321)
macOS 15.6.1 (24G90)
iOS 26.0 (23A340)
Summary:
The minus.capsule and minus.capsule.fill SF Symbols do not render in my project. Other SF Symbols (e.g., plus.capsule and minus.circle) render correctly in the same context.
Steps to Reproduce
1. Add an Image(systemName: "minus.capsule") or Image(systemName: "minus.capsule.fill") to a SwiftUI view.
2. Run the app on the latest macOS.
Expected Result
The minus capsule symbols should render consistently, similar to plus.capsule.
Actual Result
minus.capsule and minus.capsule.fill do not render at all.
Additional Testing
• Replaced minus.capsule with minus.circle: renders correctly.
• Swapped the right-hand plus.capsule symbol in my slider with minus.capsule: the symbol fails to render in that position as well. That rules out clipping or layout issues.
After reinstalling the App,the ControlWidget Gallery doesn't show custom SF Symbols
Can I use them in SK and do the animations work?
Thanks, Patrick
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?
The SF Symbols app 6.0 (99) does not export the ‘Can Rotate’ property of layers when exporting a symbol via File > Export Symbol.
Without this, all the new fantastic edit functions in the app related to rotating in SF Symbols is completely useless.
This issue with the SF Symbols 6 app can be reproduced by exporting a rotatable symbol like fan.desk, and then by importing the result as custom symbol. When inspecting ‘Group 1’ of the imported symbol, it is no longer marked as rotatable.
SF Symbols app 6.0 is still in beta, but hasn't been updated since 10 June. Hopefully this bug will be solved in the release version, or earlier.
Does anyone know how to manually add the missing rotation info to the exported SVG file?
In case an Apple engineer reads this: FB13916635
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.
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
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
Can I use the “apple.intelligence” SF symbol to refer to the functionality of Foundation Models frameworks within my app, or does it specifically refer to Apple Intelligence and not a feature of my own creation that is built upon Apple Intelligence?
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?
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?
I'm an iOS developer, and I've been testing our app in iOS 18.0 Beta. I noticed that there's a problem with the font rendering, and after troubleshooting, I've found out that it's caused by the removal of the PingFang.ttc font in 18.0.
I would like to ask the reason for removing this font file and which font should be used to display Chinese in the future?
My test device is an iPhone 11 Pro and the system version is iOS 18.0 (22A5297). I have also tested Beta 1 and it has the same issue.
In previous versions of the system, the PingFang font is located in this directory /System/Library/Fonts/LanguageSupport/PingFang.ttc. But in iOS 18.0, the font file in this directory has become Kohinoor.ttc, and I've tested that this font can't display Chinese either.
I traversed the following system font directories and could not find the PingFang.ttc font file.
/System/Library/Fonts/AppFonts
/System/Library/Fonts/Core
/System/Library/Fonts/CoreAddition
/System/Library/Fonts/CoreUI
/System/Library/Fonts/LanguageSupport
/System/Library/Fonts/UnicodeSupport
/System/Library/Fonts/Watch
Looking for answers, thanks for the help!
Is this symbol, which Safari uses to the left of the address bar, in the public SF Symbols set? What's it called?
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
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() }
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?