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

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
4.7k
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
1.8k
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.4k
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.5k
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
730
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
898
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.1k
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.2k
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
699
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
1.9k
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.2k
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
2k
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.3k
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.3k
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.2k
Aug ’22
Determine if current device has physical home button
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.
3
0
3.4k
Jul ’22
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
4.7k
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
1.8k
Activity
Jan ’23
SF Symbol for Dark Mode Icon
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!
Topic: Design SubTopic: General Tags:
Replies
2
Boosts
0
Views
2.4k
Activity
Dec ’22
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.4k
Activity
Dec ’22
SF symbols
How did you do this icon pack?
Replies
2
Boosts
0
Views
849
Activity
Nov ’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.5k
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
730
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
898
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.1k
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.2k
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
699
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
1.9k
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.2k
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
2k
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.3k
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.3k
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.2k
Activity
Aug ’22
Custom SF Symbols Won't Validate
I'm attempting to make a custom SF Symbol. But upon exporting the custom SVG file, the Symbols app refuses to validate it. I've tried dozens of variations, nothing seems to fix this.
Replies
1
Boosts
0
Views
1.3k
Activity
Aug ’22
Determine if current device has physical home button
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.
Replies
3
Boosts
0
Views
3.4k
Activity
Jul ’22
Get list of SF Symbol names in code
Hi. How do I get a list of all the available SF Symbol names from iOS using Swift code?
Replies
3
Boosts
1
Views
6.4k
Activity
Jul ’22