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

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
966
Jun ’24
Custom SF Symbols for Box Drawing?
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?
0
0
523
Apr ’24
Shopping cart count disappears after changing tabs
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) }
4
0
753
May ’24
Help Understanding Margins in Custom SF Symbols
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?
0
0
489
Apr ’24
How do you include custom symbol resources in a package?
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.
1
0
753
Apr ’24
SF Symbols 4
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
0
0
494
Mar ’24
Why do symbol images in UIKit and SwiftUI have different size?
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":
2
0
774
Mar ’24
Any way to use a SymbolEffect in an NSButton
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?
1
2
793
Apr ’24
Can't download the SF Symbols 5 app. "Access Denied".
I am trying to download the SF Symbols 5 app on my Mac but I get an error when I try to download through the SF Symbols page. This is supposedly the download link that is not working: https://devimages-cdn.apple.com/design/resources/download/SF-Symbols-5.dmg. I assume this is probably a temporary error but I thought I would bring this to attention anyway.
2
1
615
Jan ’24
Interpolation Error in SF Symbols
I created a custom icon using illustrator. I've drawn Ultrathin, duplicated the same and increased stroke width followed by expanding and creating a compound mask. When I try to validate the same I am getting Interpolation error, I am unable to figure where the error is. Can someone please help?
0
0
514
Dec ’23
How to uninstall SF Symbols 4.0
Hi, I'd like to remove the SF Symbols. I'm not sure if I can just delete it in the applications folder because I see that it takes 364.3 MB of disk space to install, but only 24.9 MB in the applications folder. I'm using macOS Monterey 12.7 Can anybody tell me how to delete it?
1
0
1k
Dec ’23
SF Symbol image color in the menu bar
I can set color of the SF symbol image in the application window but cannot do the same in the menu bar. I wonder how I can change the color in the menu? import SwiftUI @main struct ipmenuApp: App { var body: some Scene { MenuBarExtra { Image(systemName: "bookmark.circle.fill") .renderingMode(.original) .foregroundStyle(.red) } label: { Image(systemName: "bookmark.circle.fill") .renderingMode(.original) .foregroundStyle(.red) } } } xcodebuild -version Xcode 15.0 Build version 15A240d
4
1
1k
Jun ’24
SKTexture renders SF Symbols image always black
Hi, I'm creating a SF Symbols image like this: var img = UIImage(systemName: "x.circle" ,withConfiguration: symbolConfig)!.withTintColor(.red) In the debugger the image is really red. and I'm using this image to create a SKTexture: let shuffleTexture = SKTexture(image: img) The texture image is ALWAYS black and I have no idea how to change it's color. Nothing I've tried so far works. Any ideas how to solve this? Thank you! Best Regards, Frank
3
1
1k
Sep ’24
Wrong SF symbol displayed
Hi there! After a few months off, I'm starting a new app. I'm making a TabView like this: import SwiftUI struct ContentView: View {     @State private var tab: Tab = .adventures     var body: some View {         TabView(selection: $tab) {                         Text("Explore")                 .tag(Tab.explore)                 .tabItem {                     Label("Explore", systemImage: "airplane.circle")                 }             Text("Profile")                 .tag(Tab.profile)                 .tabItem {                     Label("Profile", systemImage: "person")                 }         }     }     enum Tab {         case explore, profile     } } As you noticed, I want airplane.circle and person SF Symbols on the TabView but SwiftUI is showing airplane.circle.fill and person.fill in the preview canvas and also when I run the app in the simulator. Why it is forcing me to show those icons? Xcode version: 13.4.1 SF Symbols version: 3.3 iOS deployment target: 15.0 Thank you.
2
0
1.2k
Aug ’24