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?

Hi, When putting an image that uses systemName next to a text will they be baseline aligned by default ? -- Kindest Regards

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

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

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.

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!

I'm trying to use a custom system image for my App Shortcut: AppShortcut( intent: AppOpenIntent(), phrases: ["Open \(.applicationName)"], shortTitle: "Open App", systemImageName: "custom.image" ) I've added custom.image to Images.xcassets for my project, but the shortcuts icon is always blank in the Shortcuts app. Is it possible to use custom system images for app shortcuts?

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.

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!

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?

the file does not show a black fill but the app shows a black circle. since it's to long https://gist.github.com/YutaTheTraveler/0b8c11faf997f2118d19bbd009d490ba.js

I'm trying to find out of SF Symbols is the correct tool for job I have in mind. I'm wanting to create custom box drawing symbols, like those in the unicode block. Box drawing requires the lines from one symbol to connect to the lines of an adjacent symbol. Does SF Symbols allow for this connecting of symbols, or does it create some padding restriction around each symbol, preventing lines from connecting to one another?

On my shop and content views of my app, I have a shopping cart SF symbol that I've modified with a conditional to show the number of items in the cart if the number of items is above zero. However, whenever I change tabs and back again, that icon disappears even though there should be an item in the cart. I have a video of the error, but I have no idea how to post it. Here is some of the code, let me know if you need to see more of it: CartManager.swift import Foundation import SwiftUI @Observable class CartManager { /*private(set)*/ var products: [Product] = [] private(set) var total: Int = 0 private(set) var numberofproducts: Int = 0 func count() -> Int { numberofproducts = products.count return numberofproducts } func addToCart(product: Product) { products.append(product) total += product.price numberofproducts = products.count } func removeFromCart(product: Product) { products = products.filter { $0.id != product.id } total -= product.price numberofproducts = products.count } } ShopPage.swift import SwiftUI struct ShopPage: View { @Environment(CartManager.self) private var cartManager var columns = [GridItem(.adaptive(minimum: 135), spacing: 0)] @State private var searchText = "" let items = ["LazyHeadphoneBean", "ProperBean", "BabyBean", "RoyalBean", "SpringBean", "beanbunny", "CapBean"] var filteredItems: [Bean] { guard searchText.isEmpty else { return beans } return beans.filter { $0.imageName.localizedCaseInsensitiveContains(searchText) } } var body: some View { NavigationStack { ZStack(alignment: .top) { Color.white .ignoresSafeArea(edges: .all) VStack { AppBar() .environment(cartManager) ScrollView() { LazyVGrid(columns: columns, spacing: 20) { ForEach(productList, id: \.id) { product in NavigationLink { beanDetail(product: product) .environment(cartManager) } label: { ProductCardView(product: product) .environment(cartManager) } } } } } .navigationBarDrawer(displayMode: .always)) } } .environment(cartManager) } var searchResults: [String] { if searchText.isEmpty { return items } else { return items.filter { $0.contains(searchText)} } } } #Preview { ShopPage() .environment(CartManager()) } struct AppBar: View { @Environment(CartManager.self) private var cartManager var body: some View { NavigationStack { VStack (alignment: .leading){ HStack { Spacer() NavigationLink(destination: CartView() .environment(cartManager) ) { CartButton(numberOfProducts: cartManager.products.count) } } Text("Shop for Beans") .font(.largeTitle .bold()) } } .padding() .environment(CartManager()) } } CartButton.swift import SwiftUI struct CartButton: View { var numberOfProducts: Int var body: some View { ZStack(alignment: .topTrailing) { Image(systemName: "cart.fill") .foregroundStyle(.black) .padding(5) if numberOfProducts > 0 { Text("\(numberOfProducts)") .font(.caption2).bold() .foregroundStyle(.white) .frame(width: 15, height: 15) .background(Color(hue: 1.0, saturation: 0.89, brightness: 0.835)) .clipShape(RoundedRectangle(cornerRadius: 50)) } } } } #Preview { CartButton(/*numberOfProducts: 1*/numberOfProducts: 1) }

Hello! I've been struggling for a while to understand exactly how margins work for custom SF symbols. For example, I'll have two identical svg templates containing near-identical icons (each with a circle outline and a shape in the middle), see attached images. The icons are positioned in the exact same manner in the template, so that the only difference is the symbol inside the circle. When these symbols are exported from SF Symbols and put into Xcode, I noticed that one of the symbols has a slight margin to the right and to the bottom of the symbol, causing it to fall out of alignment with surrounding symbols. I've been trying to eliminate this margin in any way I can think of, but to no avail. Anyone able to offer assistance on how to remove it and/or an explanation as to why it's there?

I am trying to include custom symbol resources in a swift package for use in other projects. I have read the documentation here: https://developer.apple.com/documentation/xcode/bundling-resources-with-a-swift-package However there is no example code and I have created a very simple project to try and get this working but it does not. .target( name: "TestLibrary", resources: [.process("Resources/Media.xcassets")] ), This is in the Package.swift file and the path relative to the Package.swift file is Sources/TestLibrary/Resources/Media.xcassets. There's a GitHub project with an example custom SF Symbol SVG (but this may not be available in the future): https://github.com/kudit/TestLibrary Including this as a package in a blank Swift Playgrounds App project and just importing the TestLibrary and including TestImageView() in the ContentView technically works (it shows the system full star image, but none of the ways of rendering the test symbol as recommended works. It does work for a few of the options in the #Preview when viewing the project in Xcode. Anyone have any suggestions or know how to get the resources to be accessible from outside the module? I have tried both the .copy( option as well as the .process( option and neither seem to work.

custom font is not displayed in storyboard after clean all data and restart still not working

Hello! I have SF Symbols 4 but i can't cope the icons, it says i need to install font i have already downloaded from Fonts - Apple Developer, is there fonts for sf 4

Hi! I'm trying to port a feature from UIKit to SwiftUI. Pixel-perfection isn't a hard requirement, but it makes it easier to image-diff the two implementations to find places that need adjustment. I noticed that when using symbol images, even if the visual size of the opaque part of the symbol is the same, the frame (bounds? margin? extents? padding? Trying to find a word here for the transparent box around the symbol that's UI-framework-agnostic.) is different, which affects apparent whitespace when the symbol is placed in a view. I created a minimal example in a SwiftUI preview: struct MyCoolView_Previews: PreviewProvider { struct UIImageViewWrapper: UIViewRepresentable { var uiImage: UIImage func makeUIView(context: Context) -> UIImageView { let uiImageView = UIImageView() uiImageView.preferredSymbolConfiguration = UIImage.SymbolConfiguration( font: UIFont.systemFont(ofSize: 64) ) uiImageView.tintColor = UIColor.black return uiImageView } func updateUIView(_ uiView: UIImageView, context: Context) { uiView.image = uiImage } } static var previews: some View { VStack { UIImageViewWrapper(uiImage: UIImage(systemName: "exclamationmark.triangle.fill")!) .background(Color.pink) .fixedSize() Image(systemName: "exclamationmark.triangle.fill") .font(Font.system(size: 64)) .background(Color.pink) ZStack { UIImageViewWrapper(uiImage: UIImage(systemName: "exclamationmark.triangle.fill")!) .background(Color.blue) .fixedSize() Image(systemName: "exclamationmark.triangle.fill") .font(Font.system(size: 64)) .background(Color.pink) .opacity(0.5) } } } } From top to bottom, the screenshot shows the UIKit version, then the SwiftUI version, and finally the two versions overlaid to show where they don't overlap. Note that the blue regions above and below the third item represents where the frame of the UIKit version extends past the frame of the SwiftUI version. Does anyone know why these are different? Is there a property that I can set on the SwiftUI version to make it behave like UIKit, or vice-versa? Thanks! PS: The difference in frame appears to depend on the specific symbol being used. Here it is for "square.and.arrow.up":

Hi, Could you please explain how to use SF Symbols animations in Final Cut? I would greatly appreciate your help. Thank you!

Examples of using SymbolEffect in AppKit all seem to be in NSImageView, and look through APIs it seems that the only way to apply those effect animations outside of SwiftUI is indeed in an NSImageView. I have a NSStatusItem where I'm using an SF Symbol in the NSStatusBarButton title (subclass of NSButton) and was trying to figure out if there was a way to use a SymbolEffect there. If the image of an NSButton uses (used) an NSImageView under the hood, that used to hidden in the buttons cell. Seeing how cells seem to be inaccessible now, perhaps there isn't a NSImageView in there these days anyway. Can NSStatusBarButton titles be provided by a custom view, oh I'm guessing the deprecated view property is still operational, but if I'm trying to release to the Mac App Store, that as equally off-limits as an NSButtonCell would have been. Is there a non-deprecated way that will let me ship to the App Store?