SF Symbols

RSS for tag

Enhance your app with a set of symbols that integrate seamlessly with the San Francisco system font.

SF Symbols Documentation

Posts under SF Symbols tag

35 Posts
Sort by:
Post not yet marked as solved
3 Replies
106 Views
Is there a way to determine whether the current device has a physical home button or not? I am building part of a UI which is very much like the Files app - it has buttons for "iCloud Documents" and "Documents on this device". For the latter, it will use a suitable symbol from SF Symbols i.e. "iphone" or "ipad" (or something for Macs). Just like the Files app. But I notice that the Files app uses the ".homebutton" symbol variants on older devices that have a physical home button. What is the easiest way to replicate that? I was considering looking at the "iPhoneNN,M" string and comparing it with the model number of the first devices without a physical button, but that is complicated by e.g. the current iPhone SE, which is "iPhone14,6". I don't want to have to maintain a table. Is there some easy way to do this? Thanks.
Posted
by endecotp.
Last updated
.
Post not yet marked as solved
0 Replies
57 Views
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.
Posted
by kauai.
Last updated
.
Post marked as solved
1 Replies
109 Views
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()     } }
Posted Last updated
.
Post not yet marked as solved
0 Replies
79 Views
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.
Posted Last updated
.
Post not yet marked as solved
0 Replies
106 Views
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.
Posted
by cyclic.
Last updated
.
Post not yet marked as solved
2 Replies
228 Views
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?
Posted Last updated
.
Post not yet marked as solved
1 Replies
179 Views
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.
Posted Last updated
.
Post not yet marked as solved
0 Replies
138 Views
Does anyone know the SF Symbol name for the Dark Mode icon in iOS/macOS? Specifically, the icon below, I'm unable to find it in the SF Symbols app... Thanks!
Posted
by BButner.
Last updated
.
Post not yet marked as solved
0 Replies
187 Views
I justed started trying to make my own SF symbols today and am having a little trouble getting it to work correctly. I downloaded a variable template, made a few edits (putting a circle around a music note, nothing crazy), and exported and validated the template (no problems). But when I finally import the custom symbol into the SF Symbols app, it just appears as a filled circle. I reviewed the Apple documentation and WWDC video on this and don't know what I'm doing wrong. The template of my custom symbol should be styled and organized just like the ones that are exported from the app—groups named with the font weight and curves within those groups. My exported SVG template is here; what I see in SF Symbols is here. Any help would be appreciated. This is driving me crazy!
Posted
by alexl94.
Last updated
.
Post not yet marked as solved
1 Replies
378 Views
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!
Posted
by Alan_Z.
Last updated
.
Post not yet marked as solved
0 Replies
256 Views
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
Posted
by DaleOne.
Last updated
.
Post not yet marked as solved
1 Replies
799 Views
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!
Posted Last updated
.
Post not yet marked as solved
2 Replies
277 Views
Is there a vaccine / shot icon available in SF Symbols 3 and Xcode 13?
Posted
by tudor5808.
Last updated
.