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

How to use "SFProDisplay-Bold" font in Xamarin iOS project.
I want to use the "SFProDisplay-Bold" font in iOS project but without adding the font files in the project as this font file is 2.2 MB and it increases the App size. To see what the default system font is, added the below code in our iOS project: var systemFont = UIFont.SystemFontOfSize(20, UIFontWeight.Bold).Name; Debug.WriteLine($"System: {systemFont.FamilyName}"); This above code gave output from our project as follows -> System: .AppleSystemUIFont and the systemFont is ".SFUI-Bold" . I believe that SFUI and SF Pro Display are different fonts(correct me if wrong) Need more clarity for ways on how to implement specific font "SF Pro Display".
1
0
1.9k
Mar ’23
Can a WKWebView somehow display SF Symbols?
Does anyone know if it’s possible for a WKWebView showing a web page in the app bundle - a help screen in my case - to show SF Symbols, by name? I’d like the help page to include some of the symbols that I use for buttons elsewhere in the app. Can I do this without having to make PNGs of the symbols? Thanks.
1
0
1.5k
Feb ’23
SF Symbols interpolation error
Hello, I'm trying to create a custom symbol using a variable template. I'm providing a single closed path for Ultralight-S, Regular-S and Black-S. I understand that points must match in each variants, so my process is: Create a path for Regular-S. When it's done, copy it to Ultralight-S and Black-S Edit the shapes of Ultralight-S and Black-S. I only manually move points, I don't add or remove points, I don't use any tool like offset or such. Export to SVG. When I try importing into SF Symbols I get an error: the symbol can't be created, the variants can't be interpolated. The only thing that works is copying the same shape into Regular, Ultralight and Black an leave them all untouched. Same template file, same SVG export settings. It works. But of course it defeats the whole purpose. I don't know what I'm supposed to do here.
Topic: Design SubTopic: General Tags:
1
1
1.8k
Feb ’23
The use of SF Symbols
Hello there, I was wondering whether or not you are allowed to use SF Symbols in a design report. The design report will be made on Adobe Indesign software. Any symbols will be referenced to Apple Inc.
Topic: Design SubTopic: General Tags:
1
0
5.0k
Feb ’23
Can CUSTOM SF Symbol images be used on websites?
Hi, from my understanding Apple's SF Symbols can only be used in apps but not on websites or app icons etc. Can custom symbol images generated using the template files provided by the SF Symbols app and then edited with apps like Sketch and Figma be used on websites? The following images are the custom symbols I designed. Please let me know if I'm free to use them on websites, images, etc.
1
0
2.1k
Jan ’23
SF Symbol Font Mismatch
I am using SF Symbols 1.1(18) on macOS Catalina. I installed all fonts from Apple's Website - https://developer.apple.com/fonts/, but I still get an error about "Font Mismatch". Problems: SF Pro & Compact Rounded/Display/Text fonts missing Installed fonts are in incorrect version Applied: Fonts reinstalled SF Symbol app reinstalled
Topic: Design SubTopic: General Tags:
3
0
3.6k
Dec ’22
set background color of [UIImage systemImageNamed: ... ]
hello all, any idea if you can set the background color of one of these new SFSymbol images? i tried this paletteColors: method, it seems to take only the first color and use it as the foreground color   UIImageSymbolConfiguration * config =         [UIImageSymbolConfiguration configurationWithPaletteColors:@[[UIColor blueColor], [UIColor redColor]]];     UIImage * confMatImageSel = [UIImage systemImageNamed:@"square.grid.2x2"             withConfiguration:config];
Topic: Design SubTopic: General Tags:
2
0
2.7k
Oct ’22
SF Symbols used in my app - do they embed in my app?
I am making a menu bar application for macOS that specifies SF Symbols as an Image. The application is now at a point where it has the functionality it needs. The question here is, are the SF Symbols used embedded in the application or something? If I had to install SF Symbols in order to use the application I made, I would be in trouble. I have 3 versions of macOS installed on my Mac. Only one OS has SF Symbols. When I switched the OS and tried it, the application icon was displayed even on the OS without SF Symbols installed, so I think it might be embedded, but I'm not sure. I would like to ask if there is anything left to do in the code. thank you.
0
0
878
Oct ’22
SF Symbols category in Feedback Assistant
I'm considering sending some suggestions for additional symbols, but I can't find a suitable category in Feedback Assistant. Am I missing something? What category would you use? Should I first file a bug against Feedback Assistant asking for a new category??
Topic: Design SubTopic: General Tags:
2
0
1.1k
Oct ’22
SF Symbols render incompletely in widgets on iOS 16
Many symbols from SF Symbols render incompletely when displayed within Widgets on iOS 16. The issue affects only symbols not rendered in monochrome, and it affects some but not all multicolor symbols. It affects all widget families, including lockscreen widgets. The issue is visible both on devices and simulators. Has anybody observed the same issue? Do you have a workaround? I filed a bug report, but have not received any feedback.
2
0
1.4k
Oct ’22
Inkscape for custom SF Symbols
Has anyone had any luck using Inkscape to edit custom SF Symbols? It seems to work OK except that it doesn't understand the required layer structure. The layers are SVG group elements, which Inkscape doesn't seem to treat as layers. I think it must need some additional attributes to distinguish layers from other groups, or something. Edited to add: specifically it seems to need the attribute inkscape:groupmode="layer" on the element. I'm going to try adding this manually to the template and see what happens!
Topic: Design SubTopic: General Tags:
0
2
1.3k
Oct ’22
SF Symbols 4
Hi all, I was wondering how to create your own SF Symbol 4....I tried to import an SVG into the SF Symbol Beta App but it didnt work. Do you have any ideas or Infos for this issue? Is there a software I can use to create my own SF Symbols ? Thanks, Mike
Topic: Design SubTopic: General Tags:
0
1
714
Oct ’22
UIImage and CGImage have different aspect ratio for SFSymbols
Dear Experts, I create a UIImage for an SFSymbol using [UIImage systemImageNamed], get its CGImage, and look at the sizes of each: UIImageConfiguration* config = [UIImageSymbolConfiguration configurationWithPointSize: 64 weight: UIImageSymbolWeightLight scale: UIImageScaleMedium]; UIImage* img = [UIImage systemImageNamed: @"chevron.compact.down" withConfiguration: config]; CGImageRef c = [img CGImage]; printf("UIImage size %f x %f, CGImage size %f x %f\n", img.size.width, img.size.height, CGImageGetWidth(c), CGImageGetHeight(c)); (Consider that pseudo-code, it's not an exact copy-paste.) Results: UIImage is 70.3333 x 25.6667 and CGImage is 163 x 43. So the aspect ratios (W/H) are 2.74 and 3.79 respectively. That can't be right! I don't expect the UIImage and the CGImage dimensions to be the same, because of the UIImage's scale (which is 3 in this case). But that should be the same for both dimensions. The effect is most pronounced with symbols that have an aspect ratio far from 1, e.g. recordingtape, ellipsis, and this chevron.compact.down. I believe that the CGImage aspect ratios are the correct ones. What is going on here?
5
0
2.3k
Oct ’22
Set automatic rendering mode for custom SF Symbols
Hello, On iOS 16 and macOS Ventura SF Symbols now have a new automatic rendering mode. Often it equals to monochrome and sometimes to hierarchical. That's a great addition for sure. But how can one set the automatic rendering mode for their customs symbols ? I failed to find the answer in the documentation or the various WWDC sessions. Thank you !
Topic: Design SubTopic: General Tags:
0
0
1.4k
Sep ’22
Why SFSymbol "face.smiling" will changed to "face.smiling.fill" when switching to dark mode.
I am using XCode 14. The following is the UIImageView, using SFSymbol face.smiling UIImageView background is pink color UIImageView tint is black color When I switch my app to dark mode, the smiling face which use to be transparent color, has became solid black color. The face line (eye, mouth, face border) used to be solid black color, had became transparent color. It seems like the image has changed from "face.smiling" to "face.smiling.fill" ? I would like to avoid such outcome. Is there a way, to force UIImageView load SFSymbol in light mode, even though the entire app is using dark mode? (This happens same when I test using real device and simulator) Thanks.
Topic: Design SubTopic: General Tags:
2
1
2.3k
Sep ’22
How often is there an SF symbols update?
Hey. I just saw a youtube video about what's new in SF Symbols 4 which was released 3 months ago. There were 722 new symbols in the video as you can see here: In my SF Symbols 4, which I just downloaded, there are 890 new symbols: So it seems as if there was a new version of Sf Symbols 4 in the time from the Youtube video until now and therefore I wonder how often a new version appears because so far I have not been able to see any release history of the versions. Best wishes
0
1
1.4k
Sep ’22
SF Symbols says The provided variants are not interpolatable- even when they are made from two symbols that are
I have been trying to make custom SF symbols, but I keep getting the error that the provided variants are not interpolatable, and even when I command-Z back to where, when I tested, it was interpolatable it says it still isn't, the file is somehow corrupted and I have to delete it. I don't know what could be wrong, this happens even when I try to make my symbol from template files. Both are interpolatable symbols but when I combine them for some reason they aren't anymore. I can't figure it out. Everything is in the same layer order, etc. For example, when I take the circle and rectangle templates and simply copy and paste them into one Illustrator document and then move each circle out of its layer into the layers Ultralight-S, Regular-S, and Black-S, it works. But when I do the same with my own custom symbols, even exporting their templates from the SF symbols app, it doesn't work and says "the provided variants are not interpolatable". I seriously don't know what to do. Even if I take one of my files that imports fine and move one of the symbols over slightly it won't import anymore, saying it's not interpolatable, and when I use undo to go to where it was before it still won't work and says it's not interpolatable.
Topic: Design SubTopic: General Tags:
1
1
1.6k
Aug ’22
Having trouble importing custom SF Symbols
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!
Topic: Design SubTopic: General Tags:
1
0
1.4k
Aug ’22
How to use "SFProDisplay-Bold" font in Xamarin iOS project.
I want to use the "SFProDisplay-Bold" font in iOS project but without adding the font files in the project as this font file is 2.2 MB and it increases the App size. To see what the default system font is, added the below code in our iOS project: var systemFont = UIFont.SystemFontOfSize(20, UIFontWeight.Bold).Name; Debug.WriteLine($"System: {systemFont.FamilyName}"); This above code gave output from our project as follows -> System: .AppleSystemUIFont and the systemFont is ".SFUI-Bold" . I believe that SFUI and SF Pro Display are different fonts(correct me if wrong) Need more clarity for ways on how to implement specific font "SF Pro Display".
Replies
1
Boosts
0
Views
1.9k
Activity
Mar ’23
Can a WKWebView somehow display SF Symbols?
Does anyone know if it’s possible for a WKWebView showing a web page in the app bundle - a help screen in my case - to show SF Symbols, by name? I’d like the help page to include some of the symbols that I use for buttons elsewhere in the app. Can I do this without having to make PNGs of the symbols? Thanks.
Replies
1
Boosts
0
Views
1.5k
Activity
Feb ’23
SF Symbols interpolation error
Hello, I'm trying to create a custom symbol using a variable template. I'm providing a single closed path for Ultralight-S, Regular-S and Black-S. I understand that points must match in each variants, so my process is: Create a path for Regular-S. When it's done, copy it to Ultralight-S and Black-S Edit the shapes of Ultralight-S and Black-S. I only manually move points, I don't add or remove points, I don't use any tool like offset or such. Export to SVG. When I try importing into SF Symbols I get an error: the symbol can't be created, the variants can't be interpolated. The only thing that works is copying the same shape into Regular, Ultralight and Black an leave them all untouched. Same template file, same SVG export settings. It works. But of course it defeats the whole purpose. I don't know what I'm supposed to do here.
Topic: Design SubTopic: General Tags:
Replies
1
Boosts
1
Views
1.8k
Activity
Feb ’23
The use of SF Symbols
Hello there, I was wondering whether or not you are allowed to use SF Symbols in a design report. The design report will be made on Adobe Indesign software. Any symbols will be referenced to Apple Inc.
Topic: Design SubTopic: General Tags:
Replies
1
Boosts
0
Views
5.0k
Activity
Feb ’23
Can CUSTOM SF Symbol images be used on websites?
Hi, from my understanding Apple's SF Symbols can only be used in apps but not on websites or app icons etc. Can custom symbol images generated using the template files provided by the SF Symbols app and then edited with apps like Sketch and Figma be used on websites? The following images are the custom symbols I designed. Please let me know if I'm free to use them on websites, images, etc.
Replies
1
Boosts
0
Views
2.1k
Activity
Jan ’23
SF Symbol Font Mismatch
I am using SF Symbols 1.1(18) on macOS Catalina. I installed all fonts from Apple's Website - https://developer.apple.com/fonts/, but I still get an error about "Font Mismatch". Problems: SF Pro & Compact Rounded/Display/Text fonts missing Installed fonts are in incorrect version Applied: Fonts reinstalled SF Symbol app reinstalled
Topic: Design SubTopic: General Tags:
Replies
3
Boosts
0
Views
3.6k
Activity
Dec ’22
set background color of [UIImage systemImageNamed: ... ]
hello all, any idea if you can set the background color of one of these new SFSymbol images? i tried this paletteColors: method, it seems to take only the first color and use it as the foreground color   UIImageSymbolConfiguration * config =         [UIImageSymbolConfiguration configurationWithPaletteColors:@[[UIColor blueColor], [UIColor redColor]]];     UIImage * confMatImageSel = [UIImage systemImageNamed:@"square.grid.2x2"             withConfiguration:config];
Topic: Design SubTopic: General Tags:
Replies
2
Boosts
0
Views
2.7k
Activity
Oct ’22
SF Symbols used in my app - do they embed in my app?
I am making a menu bar application for macOS that specifies SF Symbols as an Image. The application is now at a point where it has the functionality it needs. The question here is, are the SF Symbols used embedded in the application or something? If I had to install SF Symbols in order to use the application I made, I would be in trouble. I have 3 versions of macOS installed on my Mac. Only one OS has SF Symbols. When I switched the OS and tried it, the application icon was displayed even on the OS without SF Symbols installed, so I think it might be embedded, but I'm not sure. I would like to ask if there is anything left to do in the code. thank you.
Replies
0
Boosts
0
Views
878
Activity
Oct ’22
SF Symbols category in Feedback Assistant
I'm considering sending some suggestions for additional symbols, but I can't find a suitable category in Feedback Assistant. Am I missing something? What category would you use? Should I first file a bug against Feedback Assistant asking for a new category??
Topic: Design SubTopic: General Tags:
Replies
2
Boosts
0
Views
1.1k
Activity
Oct ’22
SF Symbols render incompletely in widgets on iOS 16
Many symbols from SF Symbols render incompletely when displayed within Widgets on iOS 16. The issue affects only symbols not rendered in monochrome, and it affects some but not all multicolor symbols. It affects all widget families, including lockscreen widgets. The issue is visible both on devices and simulators. Has anybody observed the same issue? Do you have a workaround? I filed a bug report, but have not received any feedback.
Replies
2
Boosts
0
Views
1.4k
Activity
Oct ’22
Inkscape for custom SF Symbols
Has anyone had any luck using Inkscape to edit custom SF Symbols? It seems to work OK except that it doesn't understand the required layer structure. The layers are SVG group elements, which Inkscape doesn't seem to treat as layers. I think it must need some additional attributes to distinguish layers from other groups, or something. Edited to add: specifically it seems to need the attribute inkscape:groupmode="layer" on the element. I'm going to try adding this manually to the template and see what happens!
Topic: Design SubTopic: General Tags:
Replies
0
Boosts
2
Views
1.3k
Activity
Oct ’22
SF Symbols 4
Hi all, I was wondering how to create your own SF Symbol 4....I tried to import an SVG into the SF Symbol Beta App but it didnt work. Do you have any ideas or Infos for this issue? Is there a software I can use to create my own SF Symbols ? Thanks, Mike
Topic: Design SubTopic: General Tags:
Replies
0
Boosts
1
Views
714
Activity
Oct ’22
UIImage and CGImage have different aspect ratio for SFSymbols
Dear Experts, I create a UIImage for an SFSymbol using [UIImage systemImageNamed], get its CGImage, and look at the sizes of each: UIImageConfiguration* config = [UIImageSymbolConfiguration configurationWithPointSize: 64 weight: UIImageSymbolWeightLight scale: UIImageScaleMedium]; UIImage* img = [UIImage systemImageNamed: @"chevron.compact.down" withConfiguration: config]; CGImageRef c = [img CGImage]; printf("UIImage size %f x %f, CGImage size %f x %f\n", img.size.width, img.size.height, CGImageGetWidth(c), CGImageGetHeight(c)); (Consider that pseudo-code, it's not an exact copy-paste.) Results: UIImage is 70.3333 x 25.6667 and CGImage is 163 x 43. So the aspect ratios (W/H) are 2.74 and 3.79 respectively. That can't be right! I don't expect the UIImage and the CGImage dimensions to be the same, because of the UIImage's scale (which is 3 in this case). But that should be the same for both dimensions. The effect is most pronounced with symbols that have an aspect ratio far from 1, e.g. recordingtape, ellipsis, and this chevron.compact.down. I believe that the CGImage aspect ratios are the correct ones. What is going on here?
Replies
5
Boosts
0
Views
2.3k
Activity
Oct ’22
Set automatic rendering mode for custom SF Symbols
Hello, On iOS 16 and macOS Ventura SF Symbols now have a new automatic rendering mode. Often it equals to monochrome and sometimes to hierarchical. That's a great addition for sure. But how can one set the automatic rendering mode for their customs symbols ? I failed to find the answer in the documentation or the various WWDC sessions. Thank you !
Topic: Design SubTopic: General Tags:
Replies
0
Boosts
0
Views
1.4k
Activity
Sep ’22
Why SFSymbol "face.smiling" will changed to "face.smiling.fill" when switching to dark mode.
I am using XCode 14. The following is the UIImageView, using SFSymbol face.smiling UIImageView background is pink color UIImageView tint is black color When I switch my app to dark mode, the smiling face which use to be transparent color, has became solid black color. The face line (eye, mouth, face border) used to be solid black color, had became transparent color. It seems like the image has changed from "face.smiling" to "face.smiling.fill" ? I would like to avoid such outcome. Is there a way, to force UIImageView load SFSymbol in light mode, even though the entire app is using dark mode? (This happens same when I test using real device and simulator) Thanks.
Topic: Design SubTopic: General Tags:
Replies
2
Boosts
1
Views
2.3k
Activity
Sep ’22
How often is there an SF symbols update?
Hey. I just saw a youtube video about what's new in SF Symbols 4 which was released 3 months ago. There were 722 new symbols in the video as you can see here: In my SF Symbols 4, which I just downloaded, there are 890 new symbols: So it seems as if there was a new version of Sf Symbols 4 in the time from the Youtube video until now and therefore I wonder how often a new version appears because so far I have not been able to see any release history of the versions. Best wishes
Replies
0
Boosts
1
Views
1.4k
Activity
Sep ’22
SF Symbols says The provided variants are not interpolatable- even when they are made from two symbols that are
I have been trying to make custom SF symbols, but I keep getting the error that the provided variants are not interpolatable, and even when I command-Z back to where, when I tested, it was interpolatable it says it still isn't, the file is somehow corrupted and I have to delete it. I don't know what could be wrong, this happens even when I try to make my symbol from template files. Both are interpolatable symbols but when I combine them for some reason they aren't anymore. I can't figure it out. Everything is in the same layer order, etc. For example, when I take the circle and rectangle templates and simply copy and paste them into one Illustrator document and then move each circle out of its layer into the layers Ultralight-S, Regular-S, and Black-S, it works. But when I do the same with my own custom symbols, even exporting their templates from the SF symbols app, it doesn't work and says "the provided variants are not interpolatable". I seriously don't know what to do. Even if I take one of my files that imports fine and move one of the symbols over slightly it won't import anymore, saying it's not interpolatable, and when I use undo to go to where it was before it still won't work and says it's not interpolatable.
Topic: Design SubTopic: General Tags:
Replies
1
Boosts
1
Views
1.6k
Activity
Aug ’22
Having trouble importing custom SF Symbols
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!
Topic: Design SubTopic: General Tags:
Replies
1
Boosts
0
Views
1.4k
Activity
Aug ’22