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

41 Posts
Sort by:

Post

Replies

Boosts

Views

Activity

.symbolRenderingMode(.multicolor) generates warning
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
1
1
126
2w
Button icon in List to match style?
I am trying to figure out how to set a button's label icon to match the button style when inside a list. These four buttons display differently depending on context – if put inside a List or a VStack: Button(role: .destructive) {} label: { Label("Test", systemImage: "figure") }.buttonStyle(.automatic) Button(role: .destructive) {} label: { Label("Test", systemImage: "figure") }.buttonStyle(.bordered) Button {} label: { Label("Test", systemImage: "figure") }.buttonStyle(.borderedProminent) Button(role: .destructive) {} label: { Label("Test", systemImage: "figure") }.buttonStyle(.borderedProminent) Inside a List, which looks weird in my opinion. For reference, this is what they look like inside a VStack, which is what I'd expect: I am not sure if this is intentional or a bug. If there are any workaround which do not explicitly set a specific color, like .foreground(.red), please let me know.
3
0
189
3w
iOS 18 rotate animation not working by layer for custom icon
I have created a custom logo in the SFSymbols 6.1 app and exported it as SVG. clock.arrow.trianglehead.clockwise.rotate.90.svg The icon consists of two layers and I want them to animate by layer. This works for the wiggle effect (the two layers are moving independently), but not for the rotate effect (the logo moves as a whole). Why? This is my code: let imageView = UIImageView() imageView.preferredSymbolConfiguration = UIImage.SymbolConfiguration(scale: .large) imageView.image = UIImage(named: "clock.arrow.trianglehead.clockwise.rotate.90", in: nil, with: nil) imageView.translatesAutoresizingMaskIntoConstraints = false let imageView2 = UIImageView() imageView2.preferredSymbolConfiguration = UIImage.SymbolConfiguration(scale: .large) imageView2.image = UIImage(named: "clock.arrow.trianglehead.clockwise.rotate.90", in: nil, with: nil) imageView2.translatesAutoresizingMaskIntoConstraints = false imageView.addSymbolEffect(.rotate.byLayer, options: .repeat(.continuous)); imageView2.addSymbolEffect(.wiggle.byLayer, options: .repeat(.continuous)); view.addSubview(imageView) view.addSubview(imageView2) NSLayoutConstraint.activate([ imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor), imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor), imageView2.centerXAnchor.constraint(equalTo: view.centerXAnchor), imageView2.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 40), ])
2
0
303
Sep ’24
[iOS 18] Is there an SF Symbol of the new icon in Safari's address bar?
The following icon has been introduced in Safari's address bar for iOS 18: I’d like to use it in my app to guide users on how to enable my Safari extension, but I couldn’t find it in SF Symbols beta 6.0 (99). Is this because it’s still in beta and will be available for third-party use later, or is it a private icon that only Apple can use? I hope I just overlooked something.
1
0
368
3w
Icon Fonts failing review submission with ITMS-90853: Invalid font
Hello. Icon fonts such as Font Awesome 6 and react-native-vector-icons are being rejected submission with the automated Invalid Binary error. ITMS-90853: Invalid font - There was an error validating the font named 'FontAwesome6Free-Solid' at 'private-app-name/FontAwesome6_Solid.ttf'. ‘glyf’ table instructions. These fonts have previously worked over the course of the last 3 years without issue and just stopped working on Monday. GitHub is filled with related issues and bug reports. This is likely affecting thousands of apps.
2
0
445
Sep ’24
Trouble using more than one color with SF Symbols in tinted mode
When a widget is using the new tinted mode in iOS 18 the Weather app shows the SF Symbols in both white and the tint color. For example, a tinted sun with a white arrow for sunrise. I can't figure out how to do this. If I add widgetAccentable to the Image(systemName:) the entire Image becomes the tint color. If I don't use it no combination of rendering mode or foreground style makes the tint color appear. I can't find any mention of this in the WWDC sessions.
1
0
269
Sep ’24
"Combine Symbol with Component" SF Symbol rendered incorrectly
Hello, we're observing a strange issue with SF Symbols. We do the following steps: Select a rather basic symbol like paintpalette.fill Duplicate it as Custom Symbol Select resulting Custom symbol, Combine Symbol with Component, combine it with one of the enclosures, square.fill Export resulting Combined Symbol as a Symbol (we select XCode 15, but selecting XCode 14 or lower usually doesn't have any effect) Import this asset into XCode Immediately we see the first problem: with 'Automatic' render option, XCode renders it as a black square. To render it in XCode we need to select 'Template' / 'Multicolor' / 'Hierarchical'. More, when we use that icon in the app, it is rendered OK in iOS 17.5.1 on both iPhones and iPads, but on lower iOS versions (15.8.2, 16.7.8) it is rendered as simply a colored square. Now, naturally, we suspect that this has to do with symbols availability for different iOS versions, but that particular paintpallette.fill is available in iOS 16.0+ in all forms, so that would explain why it doesn't work on iOS 15, but not in iOS 16. Moreover, we observe similar results with fully custom symbols entirely designed by us when used with components: importing a fully custom symbol and combining it with component (square) sometimes results in just a square rendered in older versions of iOS, so we sometimes get symbols working in all versions (15.8.2, 16.7.8, 17.5.1), and sometimes they are corretly rendered only in 17.5.1. On older versions it usually looks like this: What are we doing wrong?
1
1
397
Jul ’24
Center Aligning SF Symbols in Sidebar Menu
Hi, When watching SF Symbols WWDC videos about SF Symbols the recommendations is always to center align them, but suppose we are making sidebar menu items where we have VStack of HStacks , and each Stack have an SF Symbol and a text in this case how can SF Symbols be center aligned ? they will mostly right aligned so will this damage the design ? specially if they have like badges ? -- Kind Regards
0
0
345
Jul ’24
SF Symbols 6 app does not export 'Can Rotate' property of a layer
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
2
2
385
Oct ’24
SF Symbol rotate animation in NSImageView looks weird in macOS 15 beta
When using the new ‘addSymbolEffect’ effect method on NSImageView with the ‘.rotate.byLayer’ parameter with an applicable SF Symbol 6 symbol, the resulting animation is not completely as expected, to say it mildly. This is the code line I use: imageView.addSymbolEffect(.rotate.byLayer, options: .repeat(.continuous), animated: true) The correct layer rotates around the correct anchor point, but the whole image is moving up and down. The same code with the same symbol in iOS 18 beta runs perfectly. Does anyone know how to get this new rotate API correctly working in macOS 15 beta? In case an Apple engineer reads this: FB13916874 contains example projects for macOS (wobbling rotation) and iOS (perfect rotation), and a screen recording what I see in macOS 15 beta.
2
0
664
Sep ’24
PingFang.ttc font file is missing in iOS 18.0
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!
6
2
1.8k
1d
SF Symbol License
Hi all, I am a UI/UX designer working on several commercial projects, and I have a few questions that I need you to answer: Can I use the icons from your SF Symbols set in my application? This is a SAAS application and is used on various platforms such as macOS and Windows. Is SF Symbols only allowed for use in applications running on Apple platforms? Meaning, if my application is used on a MacBook or iPhone, am I allowed to use your icon set? If usage is not permitted on platforms other than Apple’s, how can I legally use them on those platforms? Does Apple sell licenses for using SF Symbols on other platforms? If so, what is the cost? Looking forward to your response.
1
0
757
Jun ’24
How to stop current symbolEffect before contentTransition?
Currently I have a cloud syncing status icon that utilizes the new "rotate" symbol effect introduced with iOS 18. After the synchronization is complete, I want to replace the icon with another symbol using the "replace" contentTransition. These are the codes I used to achieve this: Image(systemName: coreDataStack.cloudKitUIStatus.symbolName) .foregroundColor(coreDataStack.cloudKitUIStatus.symbolColor) .symbolEffect(.rotate, isActive: coreDataStack.cloudKitUIStatus == .inProgress) .contentTransition(.symbolEffect(.replace)) However, the rotation effect continues after the replace transition. This means the new icon (checkmark.icloud.fill) continues the spinning animation from the previous symbol (arrow.triangle.2.circlepath.icloud) until it completes the full circle. How can I stop the rotation immediately before the contentTransition? Thanks!
0
1
373
Jun ’24
SF Symbol
I am trying to find the following icon. I have gone through all the icons in SF Symbols 5.1 but have been unable to locate it. Does anyone know what this icon is or how I can get it?
3
0
937
Jun ’24