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
How did we do? We’d love to know your thoughts on this year’s conference. Take the survey here
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
39 Posts
Sort by:
Post
Replies
Boosts
Views
Activity
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?
Can I use them in SK and do the animations work?
Thanks, Patrick
Is this symbol, which Safari uses to the left of the address bar, in the public SF Symbols set? What's it called?
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() }
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
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.
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)
}
}
}
I'm trying to create custom SF symbols and am getting this error message when I validate the template. It doesn't matter if I Export Template or Symbol. Also, it doesn't even matter if I make any changes or not, as long as it is opened in Adobe Illustrator or Inkscape and then I save it, I will get this error message when validating.
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.
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?
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?
Is there one in SF Symbols? I couldn't find one.
If not, how do I open an enhancement ticket to request one be added?
Thank you all in advance.
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))
I have some difficulties to recreate the same SF Symbols I have configure in the app into my code. Is there a way to copy not just the name but everything including all modifier.
Thank you
When I was on the 15.1 developer beta, I downloaded the beta version of the SF Symbols app. It worked perfectly throughout the beta, but when 15.1 was released, I downloaded the stable version of SF Symbols as well and removed the beta version. However, now when it launches I am greeted by an alert titled "Fonts need by this application are missing." It goes on to say that fonts may not display properly... etc, but I haven't noticed any issues viewing any symbols I have looked up, and they seem to show up properly when I define them in Xcode. I tried uninstalling and reinstalling the application, as well as following the advice in the alert by downloading "the latest fonts from the Apple Developer website." but the alert still shows up everytime I launch SF Symbols.
Any one else experiencing this issue or know of a way to solve it? It's not that big of an issue, it's just one extra click after all, but in case it might be in the future, I just thought I'd check with others.
Thanks!
I like this font. but in license only allowed for use in Mockup UI.
Feel free to use in commercial?
https://mobbin.com/apps/bloom-ios-e1251835-34e6-426e-9f94-f9595f2567fa/1c919e9a-d144-4aa0-b788-f9752111e281/screens
Hi,
I recently updated my app to swift 6, ios 18, xcode 16.
I now have always a warning like "CoreSVG has logged an error. Set environment variabe "CORESVG_VERBOSE" to learn more." if I use an SF image with a multicolor renderingmode. I have this on labels, image, ... If I change the rendering to palette or something else the warning is gone.
For the rest, the multicolor rendering is fine because the result is ok.
Can this warning be solved?
PS: This happens on device and simulator