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

141 Posts

Post

Replies

Boosts

Views

Activity

ImageView with systemName partly blurry
The code that has the issue is this ZStack { Image(systemName: icon.isEmpty ? "book.pages.fill" : icon) .resizable() .scaledToFit() .scaleEffect(2.5) .foregroundStyle(.ultraThickMaterial) } the book.pages.fill is completely blurry and the lung is partly blurred. If I remove the .forgroundStyle(.ultraThickMaterial) is is completely blurred. Some icons, tho, are sharp no matter the forgroundStyle is omitted or not. COULD NOT UPLOUD IMAGE Here is the complete code import SwiftUI struct FolderOverviewItemView: View { @Environment(\.colorScheme) var colorScheme @Environment(\.horizontalSizeClass) private var horizontalSizeClass @Environment(\.verticalSizeClass) private var verticalSizeClass var title: String var description: String var icon: String var image: Image? = Image("dummy") var color: Color var body: some View { Grid { GridRow() { Color.clear Color.clear Color.clear Color.clear } GridRow() { Color.clear ZStack { Image(systemName: icon.isEmpty ? "book.pages.fill" : icon) .resizable() .scaledToFit() .scaleEffect(2.5) .foregroundStyle(.ultraThickMaterial) } .gridCellColumns(2) Color.clear } GridRow() { Color.clear Color.clear Color.clear Color.clear } .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading) GridRow() { HStack(alignment: .top) { VStack(alignment: .leading) { Text(title) .font(.headline) .lineLimit(1, reservesSpace: true) if horizontalSizeClass == .regular { Text(description.isEmpty ? " " : description) .font(.caption) .lineLimit(2, reservesSpace: true) .truncationMode(.tail) } else { Text(description.isEmpty ? " " : description) .font(.caption) .lineLimit(2, reservesSpace: true) .truncationMode(.middle) } } } .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading) .gridCellColumns(4) .padding() .background(.regularMaterial) } } .background( LinearGradient(gradient: Gradient(colors: [color.darken(by: -0.2), color.darken(by: 0.1)]), startPoint: .topLeading, endPoint: .bottomTrailing) ) } }
0
0
886
Oct ’23
Can we use SF Pro fonts in apps?
I'm confused about the SF Pro fonts. Can these be used in our apps? I tried pasting characters from SF Pro into a label, but was unable to get them to display properly. "SF Pro" doesn't appear in the list of available fonts in Xcode. If these are not intended to be used by app developers, then what is their purpose? Are "SF Symbols" different that SF Pro? What about the list of icons that appears in the "Symbols Library" in Xcode? There are so many different sources of symbols and icons, it is very confusing. If any of these sources is OK to use in an iOS app, is it also OK to export them for use in the event that business needs require me to create an alternate version of my app for some hypothentical non-iOS platform? Thanks, Frank
4
1
11k
Oct ’23
SF symbol
Hi I'm using Xcode and I was using SF symbol 4 before. I couldn't use it this time tried to download #5. Apparently not working in Canada, App Store said. Right now I have no symbols for my app. thanks Sumer
Topic: Design SubTopic: General Tags:
1
0
887
Oct ’23
SF Symbols usability on my app's website
Hi everyone, If I’m using SF Symbols in my app, am I allowed to use those same symbols on my app’s website? So in other words, I've used SF Symbols in my app to indicate what certain things are. For example "person.fill" to indicate a contact of a person. So now that I'm at a point where I'm developing a site for my app, I'm hoping to use those same symbols to indicate what they are for when the user uses the app. Seems a little silly that I might not be able to use them on my app, but I can’t use them to indicate what they’re for on my site? Thanks!
Topic: Design SubTopic: General Tags:
3
0
2.3k
Oct ’23
Custom SF Symbol gets error "not interpolatable"
I'm trying to make a custom SF Symbol. I've made some new custom symbols successfully, combining existing SF Symbols, so I understand the process. But as soon as I use vector files from my previous work, I get the error, "The provided variants are not interpolatable." - even though it has shapes made with vector path. Template set up - Variable I use sketch to work on the template I have separate layers for Ultralight-S, Regular-S, Black-S File saved as SVG What is wrong with my template? Thanks!
6
0
4.8k
Sep ’23
Sf Symbol now filled in
I have a strange issue with a custom SF Symbol in Xcode 15 beta 7. It works fine except if the font is body and the weight is regular: The top symbol is body, regular. The bottom is body, medium. All combinations except body, regular work. In the SF Symbols 5 app, the file validates and everything shows correctly. I wanted to attach the svg file, but I can't figure out how 😅 Is anyone aware of this issue? Or am I the issue?
1
0
1k
Aug ’23
Coloring SFSymbol in code
I'm currently experimenting with SFSymbol animations for iOS 17.0 I have a custom symbol that I like to animate with the Variable Color effect, and I want to set the colors in code. However, coloring the symbol in code doesn't work. What am I missing? Image("my-fancy-custom-symbol") .symbolRenderingMode(.multicolor) .foregroundStyle(.white, .yellow) .symbolEffect(.variableColor, options: .repeating)
0
0
930
Jul ’23
Custom SF Symbols not visible in iOS 17 Beta
Hey there! We use a lot of custom SFSymbols in our app. We found a bug in iOS 17 that images has wrong appearance. Sometimes there are shown only parts of their outline, some symbols are totally filled by system (blue) tint color, so they ignore the default color of resource and also ignoring .tintColor parameter. But when we use default Apple SF Symbols they work correctly. Everything works correctly in versions earlier iOS 17 so we want to know is it a bug or we do something wrong? Example of usage SF in our workspace: let image = UIImage(named: "*****_critical", in: Bundle.main, compatibleWith: nil)?.applyingSymbolConfiguration(UIImage.SymbolConfiguration.preferringMulticolor()) let imageView = UIImageView(image: image) imageView.contentMode = .scaleAspectFit imageView.tintColor = myColor Thanks.
1
0
1.8k
Jul ’23
Is it possible to use the replace effect with custom symbols and system symbols in SwiftUI?
Hi! I was wondering if it is possible to use the replace effect from a custom symbol to a system symbol. I've tried a if/else to switch from an Image with a custom symbol to an Image with a system symbol to no avail. I assume it needs to be the same Image view when transitioning so I think that's my problem, is there something I'm missing?
0
0
1k
Jun ’23
SF-Pro font issue with SF Symbols application
When I run SF Symbols, I get a "Fonts Mismatch" error. It claims that newer versions of all the SF-Pro-[Display/Rounded/etc.] family (save the italics ones) are available. The link it sends me to apparently still has the older versions. I've deleted the 'older' versions of the font files and then run the SF-Pro font installer off the downloaded disk image; error just continues to appear.
3
0
3.8k
Jun ’23
Apple's SF Symbol
Is that allowed to use Apple's SF symbol in the app that submitted to Swift Student Challenge? I have done some search and it says SF symbols can be used for APPs that run on apple devices. I won't use the SF Symbols for logo or any other trademark-related use. Just confirming that I am able to use SF Symbols to develop my APP for Swift Student Challenge right? All SF Symbols shall be considered to be system-provided images as defined in the Xcode and Apple SDKs license agreements and are subject to the terms and conditions set forth therein. You may not use SF Symbols — or glyphs that are substantially or confusingly similar — in your app icons, logos, or any other trademark-related use. Apple reserves the right to review and, in its sole discretion, require modification or discontinuance of use of any Symbol used in violation of the foregoing restrictions, and you agree to promptly comply with any such request. Solely for the purpose of developing Applications for Apple-branded products that run on the system for which the image was provided.
1
1
1.9k
Apr ’23
SF Symbol name in WeatherKit REST API requests
I am currently working on integrating the WeatherKit REST API into web application, and I am having trouble finding the correct symbol to use from the SF Symbol Library to represent the weather conditions returned in the API response. I have searched through the documentation for the WeatherKit REST API, but I was unable to find any information about the symbol name to use for each weather condition. Thank you in advance for your help!
0
0
951
Mar ’23
ImageView with systemName partly blurry
The code that has the issue is this ZStack { Image(systemName: icon.isEmpty ? "book.pages.fill" : icon) .resizable() .scaledToFit() .scaleEffect(2.5) .foregroundStyle(.ultraThickMaterial) } the book.pages.fill is completely blurry and the lung is partly blurred. If I remove the .forgroundStyle(.ultraThickMaterial) is is completely blurred. Some icons, tho, are sharp no matter the forgroundStyle is omitted or not. COULD NOT UPLOUD IMAGE Here is the complete code import SwiftUI struct FolderOverviewItemView: View { @Environment(\.colorScheme) var colorScheme @Environment(\.horizontalSizeClass) private var horizontalSizeClass @Environment(\.verticalSizeClass) private var verticalSizeClass var title: String var description: String var icon: String var image: Image? = Image("dummy") var color: Color var body: some View { Grid { GridRow() { Color.clear Color.clear Color.clear Color.clear } GridRow() { Color.clear ZStack { Image(systemName: icon.isEmpty ? "book.pages.fill" : icon) .resizable() .scaledToFit() .scaleEffect(2.5) .foregroundStyle(.ultraThickMaterial) } .gridCellColumns(2) Color.clear } GridRow() { Color.clear Color.clear Color.clear Color.clear } .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading) GridRow() { HStack(alignment: .top) { VStack(alignment: .leading) { Text(title) .font(.headline) .lineLimit(1, reservesSpace: true) if horizontalSizeClass == .regular { Text(description.isEmpty ? " " : description) .font(.caption) .lineLimit(2, reservesSpace: true) .truncationMode(.tail) } else { Text(description.isEmpty ? " " : description) .font(.caption) .lineLimit(2, reservesSpace: true) .truncationMode(.middle) } } } .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading) .gridCellColumns(4) .padding() .background(.regularMaterial) } } .background( LinearGradient(gradient: Gradient(colors: [color.darken(by: -0.2), color.darken(by: 0.1)]), startPoint: .topLeading, endPoint: .bottomTrailing) ) } }
Replies
0
Boosts
0
Views
886
Activity
Oct ’23
Can we use SF Pro fonts in apps?
I'm confused about the SF Pro fonts. Can these be used in our apps? I tried pasting characters from SF Pro into a label, but was unable to get them to display properly. "SF Pro" doesn't appear in the list of available fonts in Xcode. If these are not intended to be used by app developers, then what is their purpose? Are "SF Symbols" different that SF Pro? What about the list of icons that appears in the "Symbols Library" in Xcode? There are so many different sources of symbols and icons, it is very confusing. If any of these sources is OK to use in an iOS app, is it also OK to export them for use in the event that business needs require me to create an alternate version of my app for some hypothentical non-iOS platform? Thanks, Frank
Replies
4
Boosts
1
Views
11k
Activity
Oct ’23
SF symbol
Hi I'm using Xcode and I was using SF symbol 4 before. I couldn't use it this time tried to download #5. Apparently not working in Canada, App Store said. Right now I have no symbols for my app. thanks Sumer
Topic: Design SubTopic: General Tags:
Replies
1
Boosts
0
Views
887
Activity
Oct ’23
SF Symbols usability on my app's website
Hi everyone, If I’m using SF Symbols in my app, am I allowed to use those same symbols on my app’s website? So in other words, I've used SF Symbols in my app to indicate what certain things are. For example "person.fill" to indicate a contact of a person. So now that I'm at a point where I'm developing a site for my app, I'm hoping to use those same symbols to indicate what they are for when the user uses the app. Seems a little silly that I might not be able to use them on my app, but I can’t use them to indicate what they’re for on my site? Thanks!
Topic: Design SubTopic: General Tags:
Replies
3
Boosts
0
Views
2.3k
Activity
Oct ’23
Custom SF Symbol gets error "not interpolatable"
I'm trying to make a custom SF Symbol. I've made some new custom symbols successfully, combining existing SF Symbols, so I understand the process. But as soon as I use vector files from my previous work, I get the error, "The provided variants are not interpolatable." - even though it has shapes made with vector path. Template set up - Variable I use sketch to work on the template I have separate layers for Ultralight-S, Regular-S, Black-S File saved as SVG What is wrong with my template? Thanks!
Replies
6
Boosts
0
Views
4.8k
Activity
Sep ’23
Sf Symbol now filled in
I have a strange issue with a custom SF Symbol in Xcode 15 beta 7. It works fine except if the font is body and the weight is regular: The top symbol is body, regular. The bottom is body, medium. All combinations except body, regular work. In the SF Symbols 5 app, the file validates and everything shows correctly. I wanted to attach the svg file, but I can't figure out how 😅 Is anyone aware of this issue? Or am I the issue?
Replies
1
Boosts
0
Views
1k
Activity
Aug ’23
Can't use SF Symbols 5.0 in Xcode 15
When I try to import a custom SF Symbol exported for XCode 15 and try to import it in Xcode 15 beta (15A5160n), I got the error: The SVG file provided for the symbol image set 'rings.heart' is not suitable: Template format 5.0 is newer than the version that this software supports (4.0) Is Xcode 15 Beta not ready yet for Custom SF Symbols 5.0?
Replies
2
Boosts
2
Views
2.5k
Activity
Aug ’23
Coloring SFSymbol in code
I'm currently experimenting with SFSymbol animations for iOS 17.0 I have a custom symbol that I like to animate with the Variable Color effect, and I want to set the colors in code. However, coloring the symbol in code doesn't work. What am I missing? Image("my-fancy-custom-symbol") .symbolRenderingMode(.multicolor) .foregroundStyle(.white, .yellow) .symbolEffect(.variableColor, options: .repeating)
Replies
0
Boosts
0
Views
930
Activity
Jul ’23
Custom SF Symbols not visible in iOS 17 Beta
Hey there! We use a lot of custom SFSymbols in our app. We found a bug in iOS 17 that images has wrong appearance. Sometimes there are shown only parts of their outline, some symbols are totally filled by system (blue) tint color, so they ignore the default color of resource and also ignoring .tintColor parameter. But when we use default Apple SF Symbols they work correctly. Everything works correctly in versions earlier iOS 17 so we want to know is it a bug or we do something wrong? Example of usage SF in our workspace: let image = UIImage(named: "*****_critical", in: Bundle.main, compatibleWith: nil)?.applyingSymbolConfiguration(UIImage.SymbolConfiguration.preferringMulticolor()) let imageView = UIImageView(image: image) imageView.contentMode = .scaleAspectFit imageView.tintColor = myColor Thanks.
Replies
1
Boosts
0
Views
1.8k
Activity
Jul ’23
Is it possible to use the replace effect with custom symbols and system symbols in SwiftUI?
Hi! I was wondering if it is possible to use the replace effect from a custom symbol to a system symbol. I've tried a if/else to switch from an Image with a custom symbol to an Image with a system symbol to no avail. I assume it needs to be the same Image view when transitioning so I think that's my problem, is there something I'm missing?
Replies
0
Boosts
0
Views
1k
Activity
Jun ’23
SF-Pro font issue with SF Symbols application
When I run SF Symbols, I get a "Fonts Mismatch" error. It claims that newer versions of all the SF-Pro-[Display/Rounded/etc.] family (save the italics ones) are available. The link it sends me to apparently still has the older versions. I've deleted the 'older' versions of the font files and then run the SF-Pro font installer off the downloaded disk image; error just continues to appear.
Replies
3
Boosts
0
Views
3.8k
Activity
Jun ’23
Apple's SF Symbol
Is that allowed to use Apple's SF symbol in the app that submitted to Swift Student Challenge? I have done some search and it says SF symbols can be used for APPs that run on apple devices. I won't use the SF Symbols for logo or any other trademark-related use. Just confirming that I am able to use SF Symbols to develop my APP for Swift Student Challenge right? All SF Symbols shall be considered to be system-provided images as defined in the Xcode and Apple SDKs license agreements and are subject to the terms and conditions set forth therein. You may not use SF Symbols — or glyphs that are substantially or confusingly similar — in your app icons, logos, or any other trademark-related use. Apple reserves the right to review and, in its sole discretion, require modification or discontinuance of use of any Symbol used in violation of the foregoing restrictions, and you agree to promptly comply with any such request. Solely for the purpose of developing Applications for Apple-branded products that run on the system for which the image was provided.
Replies
1
Boosts
1
Views
1.9k
Activity
Apr ’23
SF Symbol name in WeatherKit REST API requests
I am currently working on integrating the WeatherKit REST API into web application, and I am having trouble finding the correct symbol to use from the SF Symbol Library to represent the weather conditions returned in the API response. I have searched through the documentation for the WeatherKit REST API, but I was unable to find any information about the symbol name to use for each weather condition. Thank you in advance for your help!
Replies
0
Boosts
0
Views
951
Activity
Mar ’23