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

147 Posts

Post

Replies

Boosts

Views

Activity

SF Symbols beta 4
The download links on this page: https://developer.apple.com/sf-symbols/ state this is SF Symbols beta 4. Though downloading, installing, and launching Applications->SF Symbols beta then selecting SF Symbols beta->"About SF Symbols beta" in the menu pulldown it displays version 3 with older copyright. This does not appear to be the new beta 4. Can someone let me know if they see the same and how to download the true beta 4.
Topic: Design SubTopic: General Tags:
0
0
1.4k
Jul ’22
Referencing static method 'buildBlock' on 'Optional' requires that 'UIImage' conform to 'View'
I'm trying to make a mockup app to test my developing skills, i'm a mere beginner so I'm just using trial and error + tutorials to find my way through the solution and I can't get through this one, I'm thinking of using multiple Fan Francisco Icons so I may need a solution on how to insert an SF Icon ((I only know how to insert a Text or Image at the time)) Thanks in advice c: Happy coding everybody! //  ContentView.swift //  ------------- // //  Created by-------------- on 05/07/22. // import SwiftUI struct ContentView: View {     var body: some View {         ZStack { //ERROR HERE: Referencing static method 'buildBlock' on 'Optional' requires that 'UIImage' conform to 'View'             ScrollView {                              }                          VStack {         HStack {                          Text("Razer Nari")                 .font(.system(size: 90, weight: .semibold, design: .default))                 .fontWeight(.bold)                 .foregroundColor(Color(hue: 0.322, saturation: 0.885, brightness: 0.799))                 .padding(.trailing)                 .frame(width: 320.0, height: 215.0)                                           Image("razer")                 .resizable(resizingMode: .stretch)                 .aspectRatio(contentMode: .fit)                 .padding(.bottom)                 .frame(width: /*@START_MENU_TOKEN@*/120.0/*@END_MENU_TOKEN@*/, height: /*@START_MENU_TOKEN@*/120.0/*@END_MENU_TOKEN@*/)                                                            }                                                                 Image("cuffie")                 .resizable()                 .aspectRatio(contentMode: .fit)                 .padding([.bottom, .trailing])                 .frame(width: 320.0, height: 300.0)                                               Spacer()                      //ERROR OCCURRED WHEN TRYING TO USE A SF ICON, IDK IF IT'S THE CORRECT WAY TO USE THEM THO         UIImage(systemName: "antenna.radiowaves.left.and.right")                                                                                  }             .frame(maxWidth:.infinity, maxHeight: .infinity)             .background(Color(hue:0.0, saturation: 0.0 , brightness: 0.08 ))             .foregroundColor(Color.white)                      }                               }                                                                                                           }         struct ContentView_Previews: PreviewProvider {     static var previews: some View {         ContentView()     } }
1
0
2.3k
Jul ’22
iOS 16.0 beta 2 can no longer render variable color and multicolor simultaneously
iOS 16.0 beta 1 added a new UIImage initialiser for creating a system image that allows both a variable color amount and symbol configuration to be provided: +[UIImage systemImageNamed:variableValue:withConfiguration:] In beta 1 I was able to use this just fine and could happily mix variable color with all the different render modes. In beta 2 using this initialiser always results in monochrome rendering. In beta 2, if I ask for multicolor I get monochrome. I don't get the new automatic render as images such as iphone.homebutton.radiowaves.left.and.right appear in monochrome, not hierarchical.
Topic: Design SubTopic: General Tags:
0
0
1.8k
Jun ’22
Safari Web App and iOS App
We understand that SF is the native font, and that symbols are part the overall look and feel of the Apple system, and that some symbols are reserved for specific features. With these constraints in mind, we do not wish to implement SF symbols in any way as to misrepresent Apple's existing products or features. Is it possible to use SF symbols in an iOS app and web app targeting Safari? It seems this would be relatively straight forward, and should be important to communicate design language properly across apps. Otherwise, there will be some confusion.
Topic: Design SubTopic: General Tags:
0
0
921
Jun ’22
Navigation Bar button icons not shown in iOS 12.4
I am developing an app to run on iOS 12.4 or newer using Xcode 12.3 on MacOS Catalina. On my screens I have a number of navigation bar buttons which have a system icon specified as well as text in Interface Builder. When running on an iOS 14.3 simulator, the bar button icons appear but on an iOS 12.4 simulator (and an iOS 12.4 device) the icons do not appear and only text is shown. The buttons still work OK on iOS12.4. How can I make system icons appear in Navigation bar button items in Xcode 12.4?
2
0
1.3k
Jun ’22
Custom SF Symbols with Illustrator
Anyone successful in creating custom SF Symbols with Adobe Illustrator? I've been starting with a variable template, and moving margins mostly works, but if I then attempt to center artwork, it leads the resultant SVG as not being usable by SF Symbols app. Specifics... I want one of my apps that uses icons for table view cells, to switch over to SF symbols. For most, I could take advtange of an Apple-supplied one. However, due to each symbol having a different margins, this leads to textual content in the cells not all being aligned. So I thought I would copy the symbols as all being custom, exporting as a variable template, and adjusting the margins in Illustrator such that all margins were the same. I also just tried a trial of Sketch. And while that didn't mess up the SVG, the feature set is too limited for my needs. One other thing I just tried in Illustrator was starting with a variable template, deleting all three symbols, adjusting the margins to be on integral pixel boundaries, and then centering a simple square path in each area. Importing back into SF symbols though shows my square non-centered. It shouldn't be this difficult.
Topic: Design SubTopic: General Tags:
2
0
1.8k
Jun ’22
Metal Text Rendering w/ SF Fonts: What's Allowed?
I'm trying to render text with Metal for my (2D) game. I'm using the system fonts, e.g. the SF Pro family for English texts. I render the glyphs onto an atlas texture, and then sample from this texture. My questions: I assume that, for copyright reasons, I'm not allowed to include a pre-rendered font atlas in my app. Is my assumption correct? I can, however, have the app generate the atlas when it's first opened, and then use it within the app, right? If 2. is true, then can the app save the atlas somewhere in the app's private storage, so that it would not need to re-generate the atlas the next time? Thanks!
1
0
1.5k
Mar ’22
May I know how can I use SF Symbols beta to create custom icon?
I am using "checkmark.circle.fill" I wish to have a blue filled circle with the checkmark being solid black. For the blue filled circle, I can choose the tinted color as blue. But, the default SF Symbols "checkmark.circle.fill", its checkmark is transparent. It looks as follow So, I try to use "SF Symbols beta", to create custom icon. During editing, the thing seems like what I want Blue filled circle Solid black color for checkmark Then, I use "Export Symbol...", using Template Version 2.0 (XCode cannot recognise Template Version 3.0) It seems like the checkmark fall back to transparent color. When I import it to XCode It seems like the "solid black color" on the checkmark is gone. When I use this custom icon in my app, it gave same result as "checkmark.circle.fill" (the checkmark still remain as transparent) Doesn't anyone know how to resolve this issue? Thanks.
Topic: Design SubTopic: General Tags:
1
0
4.2k
Jan ’22
SF Symbol using string interpolation
I was very happy when I saw this: "You can embed a symbol inside a run of text by using string interpolation." Text("Thalia… \(Image(systemName: "chevron.forward"))") Unfortunately this is a feature of SwiftUI and not generally available string interpolation. In places where a string is expected like an Apple Watch Compilcation Text Provider CLKSimpleTextProvider(text: "\(Image(systemName: "heart"))") this doesn't return an inline Image but "Image(provider: SwiftUI.ImageProviderBox<SwiftUI.Image.(unknown context at $18487da20).NamedImageProvider>)" So… Is there a way to include an SF Symbol in a regular string to wiggle it into a CLKSimpleTextProvider?
2
0
3k
Dec ’21
How to use SF Symbols 3
If I want to use SF Symbols 3 in my swift project, do I have to export the symbols from the SF Symbols app and add them to my app's Asset Catalog, or is there a way for Xcode to automatically use those symbols without me having to add them to the Asset Catalog?
Topic: Design SubTopic: General Tags:
2
0
3.5k
Dec ’21
Catalyst symbol assets lost in app thinning after App Store Connect upload
Our app has some custom vector symbol images stored in an asset catalog. Images using these symbols work fine on macOS Catalyst when building/running/debugging locally. Until we post the macOS catalyst app to TestFlight. The app downloaded from TestFlight does not contain these symbols. (The same symbols work fine on iOS/TestFlight) I've verified that the archive that's uploaded to AppStore Connect contains these symbols in the Assets.car resource, which is 1.9MB. The resulting binary downloaded from TestFlight has an Assets.car resource which is 1.5MB. The asset catalog editor in Xcode does not give a UI to select the idiom for these SVG resources, but the underlying JSON for the asset does specify the "universal" idiom. So why are these assets being thinned out of the download of the macOS catalyst app? What am I missing here?
4
0
1.2k
Dec ’21
SF Symbols Update (fonts mismatch problem)
Why is it that every time you update SF Symbols, all the fonts previously used get confused and mismatched? Why is it that every time you update SF symbols, you need to also download the SF fonts all over again? This is such a big issue that should not be happening. Puts our designs in jeopardy.
Topic: Design SubTopic: General Tags:
0
0
454
Nov ’21
SF Symbols beta 4
The download links on this page: https://developer.apple.com/sf-symbols/ state this is SF Symbols beta 4. Though downloading, installing, and launching Applications->SF Symbols beta then selecting SF Symbols beta->"About SF Symbols beta" in the menu pulldown it displays version 3 with older copyright. This does not appear to be the new beta 4. Can someone let me know if they see the same and how to download the true beta 4.
Topic: Design SubTopic: General Tags:
Replies
0
Boosts
0
Views
1.4k
Activity
Jul ’22
Referencing static method 'buildBlock' on 'Optional' requires that 'UIImage' conform to 'View'
I'm trying to make a mockup app to test my developing skills, i'm a mere beginner so I'm just using trial and error + tutorials to find my way through the solution and I can't get through this one, I'm thinking of using multiple Fan Francisco Icons so I may need a solution on how to insert an SF Icon ((I only know how to insert a Text or Image at the time)) Thanks in advice c: Happy coding everybody! //  ContentView.swift //  ------------- // //  Created by-------------- on 05/07/22. // import SwiftUI struct ContentView: View {     var body: some View {         ZStack { //ERROR HERE: Referencing static method 'buildBlock' on 'Optional' requires that 'UIImage' conform to 'View'             ScrollView {                              }                          VStack {         HStack {                          Text("Razer Nari")                 .font(.system(size: 90, weight: .semibold, design: .default))                 .fontWeight(.bold)                 .foregroundColor(Color(hue: 0.322, saturation: 0.885, brightness: 0.799))                 .padding(.trailing)                 .frame(width: 320.0, height: 215.0)                                           Image("razer")                 .resizable(resizingMode: .stretch)                 .aspectRatio(contentMode: .fit)                 .padding(.bottom)                 .frame(width: /*@START_MENU_TOKEN@*/120.0/*@END_MENU_TOKEN@*/, height: /*@START_MENU_TOKEN@*/120.0/*@END_MENU_TOKEN@*/)                                                            }                                                                 Image("cuffie")                 .resizable()                 .aspectRatio(contentMode: .fit)                 .padding([.bottom, .trailing])                 .frame(width: 320.0, height: 300.0)                                               Spacer()                      //ERROR OCCURRED WHEN TRYING TO USE A SF ICON, IDK IF IT'S THE CORRECT WAY TO USE THEM THO         UIImage(systemName: "antenna.radiowaves.left.and.right")                                                                                  }             .frame(maxWidth:.infinity, maxHeight: .infinity)             .background(Color(hue:0.0, saturation: 0.0 , brightness: 0.08 ))             .foregroundColor(Color.white)                      }                               }                                                                                                           }         struct ContentView_Previews: PreviewProvider {     static var previews: some View {         ContentView()     } }
Replies
1
Boosts
0
Views
2.3k
Activity
Jul ’22
Hi swiftUI guys, how can I use variable color? can't find how
⬆️
Replies
2
Boosts
0
Views
1.2k
Activity
Jun ’22
Downloadable new fonts?!
Are the new fonts available to be downloaded and used in other apps such as Figma or Sketch? We want to design a new UI with SF Expanded, but cannot seem to find it anywhere.
Replies
1
Boosts
1
Views
1.8k
Activity
Jun ’22
iOS 16.0 beta 2 can no longer render variable color and multicolor simultaneously
iOS 16.0 beta 1 added a new UIImage initialiser for creating a system image that allows both a variable color amount and symbol configuration to be provided: +[UIImage systemImageNamed:variableValue:withConfiguration:] In beta 1 I was able to use this just fine and could happily mix variable color with all the different render modes. In beta 2 using this initialiser always results in monochrome rendering. In beta 2, if I ask for multicolor I get monochrome. I don't get the new automatic render as images such as iphone.homebutton.radiowaves.left.and.right appear in monochrome, not hierarchical.
Topic: Design SubTopic: General Tags:
Replies
0
Boosts
0
Views
1.8k
Activity
Jun ’22
Safari Web App and iOS App
We understand that SF is the native font, and that symbols are part the overall look and feel of the Apple system, and that some symbols are reserved for specific features. With these constraints in mind, we do not wish to implement SF symbols in any way as to misrepresent Apple's existing products or features. Is it possible to use SF symbols in an iOS app and web app targeting Safari? It seems this would be relatively straight forward, and should be important to communicate design language properly across apps. Otherwise, there will be some confusion.
Topic: Design SubTopic: General Tags:
Replies
0
Boosts
0
Views
921
Activity
Jun ’22
Navigation Bar button icons not shown in iOS 12.4
I am developing an app to run on iOS 12.4 or newer using Xcode 12.3 on MacOS Catalina. On my screens I have a number of navigation bar buttons which have a system icon specified as well as text in Interface Builder. When running on an iOS 14.3 simulator, the bar button icons appear but on an iOS 12.4 simulator (and an iOS 12.4 device) the icons do not appear and only text is shown. The buttons still work OK on iOS12.4. How can I make system icons appear in Navigation bar button items in Xcode 12.4?
Replies
2
Boosts
0
Views
1.3k
Activity
Jun ’22
Custom SF Symbols with Illustrator
Anyone successful in creating custom SF Symbols with Adobe Illustrator? I've been starting with a variable template, and moving margins mostly works, but if I then attempt to center artwork, it leads the resultant SVG as not being usable by SF Symbols app. Specifics... I want one of my apps that uses icons for table view cells, to switch over to SF symbols. For most, I could take advtange of an Apple-supplied one. However, due to each symbol having a different margins, this leads to textual content in the cells not all being aligned. So I thought I would copy the symbols as all being custom, exporting as a variable template, and adjusting the margins in Illustrator such that all margins were the same. I also just tried a trial of Sketch. And while that didn't mess up the SVG, the feature set is too limited for my needs. One other thing I just tried in Illustrator was starting with a variable template, deleting all three symbols, adjusting the margins to be on integral pixel boundaries, and then centering a simple square path in each area. Importing back into SF symbols though shows my square non-centered. It shouldn't be this difficult.
Topic: Design SubTopic: General Tags:
Replies
2
Boosts
0
Views
1.8k
Activity
Jun ’22
can i use sfsymbols in my app?
i will make and release my app in appstore. in this process, i use sfsymbols icons in my app. Is this legally okay? like copyright
Replies
3
Boosts
0
Views
3.0k
Activity
May ’22
SF Symbols & Fonts - Commercial use
Are SF Symbols and other fonts provided available for commercial use? For example, in a marketing website.
Replies
1
Boosts
0
Views
1.6k
Activity
Apr ’22
Can I use the sf symbols icons commercially?
Any problem?
Topic: Design SubTopic: General Tags:
Replies
3
Boosts
0
Views
2.4k
Activity
Apr ’22
Metal Text Rendering w/ SF Fonts: What's Allowed?
I'm trying to render text with Metal for my (2D) game. I'm using the system fonts, e.g. the SF Pro family for English texts. I render the glyphs onto an atlas texture, and then sample from this texture. My questions: I assume that, for copyright reasons, I'm not allowed to include a pre-rendered font atlas in my app. Is my assumption correct? I can, however, have the app generate the atlas when it's first opened, and then use it within the app, right? If 2. is true, then can the app save the atlas somewhere in the app's private storage, so that it would not need to re-generate the atlas the next time? Thanks!
Replies
1
Boosts
0
Views
1.5k
Activity
Mar ’22
Crop image symbol to content
Hi, If I generate an image from a symbol the resulting image is surrounded by some margins. For example this code: let image = UIImage(systemName: "suit.heart") will generate this image: As you can see there are some margins around the content. There is a way to build an image cropped to the actual content, like showed in the below example? Thank you
Replies
0
Boosts
0
Views
883
Activity
Mar ’22
SF Symbols 3 Vaccine Icon
Is there a vaccine / shot icon available in SF Symbols 3 and Xcode 13?
Topic: Design SubTopic: General Tags:
Replies
2
Boosts
0
Views
978
Activity
Jan ’22
May I know how can I use SF Symbols beta to create custom icon?
I am using "checkmark.circle.fill" I wish to have a blue filled circle with the checkmark being solid black. For the blue filled circle, I can choose the tinted color as blue. But, the default SF Symbols "checkmark.circle.fill", its checkmark is transparent. It looks as follow So, I try to use "SF Symbols beta", to create custom icon. During editing, the thing seems like what I want Blue filled circle Solid black color for checkmark Then, I use "Export Symbol...", using Template Version 2.0 (XCode cannot recognise Template Version 3.0) It seems like the checkmark fall back to transparent color. When I import it to XCode It seems like the "solid black color" on the checkmark is gone. When I use this custom icon in my app, it gave same result as "checkmark.circle.fill" (the checkmark still remain as transparent) Doesn't anyone know how to resolve this issue? Thanks.
Topic: Design SubTopic: General Tags:
Replies
1
Boosts
0
Views
4.2k
Activity
Jan ’22
SF Symbol using string interpolation
I was very happy when I saw this: "You can embed a symbol inside a run of text by using string interpolation." Text("Thalia… \(Image(systemName: "chevron.forward"))") Unfortunately this is a feature of SwiftUI and not generally available string interpolation. In places where a string is expected like an Apple Watch Compilcation Text Provider CLKSimpleTextProvider(text: "\(Image(systemName: "heart"))") this doesn't return an inline Image but "Image(provider: SwiftUI.ImageProviderBox<SwiftUI.Image.(unknown context at $18487da20).NamedImageProvider>)" So… Is there a way to include an SF Symbol in a regular string to wiggle it into a CLKSimpleTextProvider?
Replies
2
Boosts
0
Views
3k
Activity
Dec ’21
How to use SF Symbols 3
If I want to use SF Symbols 3 in my swift project, do I have to export the symbols from the SF Symbols app and add them to my app's Asset Catalog, or is there a way for Xcode to automatically use those symbols without me having to add them to the Asset Catalog?
Topic: Design SubTopic: General Tags:
Replies
2
Boosts
0
Views
3.5k
Activity
Dec ’21
Catalyst symbol assets lost in app thinning after App Store Connect upload
Our app has some custom vector symbol images stored in an asset catalog. Images using these symbols work fine on macOS Catalyst when building/running/debugging locally. Until we post the macOS catalyst app to TestFlight. The app downloaded from TestFlight does not contain these symbols. (The same symbols work fine on iOS/TestFlight) I've verified that the archive that's uploaded to AppStore Connect contains these symbols in the Assets.car resource, which is 1.9MB. The resulting binary downloaded from TestFlight has an Assets.car resource which is 1.5MB. The asset catalog editor in Xcode does not give a UI to select the idiom for these SVG resources, but the underlying JSON for the asset does specify the "universal" idiom. So why are these assets being thinned out of the download of the macOS catalyst app? What am I missing here?
Replies
4
Boosts
0
Views
1.2k
Activity
Dec ’21
SF Symbols Update (fonts mismatch problem)
Why is it that every time you update SF Symbols, all the fonts previously used get confused and mismatched? Why is it that every time you update SF symbols, you need to also download the SF fonts all over again? This is such a big issue that should not be happening. Puts our designs in jeopardy.
Topic: Design SubTopic: General Tags:
Replies
0
Boosts
0
Views
454
Activity
Nov ’21
can I use the san francisco font in my company's logo?
can I use the san francisco font in my company's logo? "SF Pro Rounded"... are there any copyrights? is this legal? Thanks.
Topic: Design SubTopic: General Tags:
Replies
1
Boosts
0
Views
3k
Activity
Oct ’21