{"id":25607,"date":"2019-06-10T17:02:27","date_gmt":"2019-06-10T21:02:27","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=25607"},"modified":"2019-08-22T13:42:03","modified_gmt":"2019-08-22T17:42:03","slug":"sf-symbols","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2019\/06\/10\/sf-symbols\/","title":{"rendered":"SF Symbols"},"content":{"rendered":"

Apple<\/a>:<\/p>\n

\n

SF Symbols provides a set of over 1,500 consistent, highly configurable symbols you can use in your app. Apple designed SF Symbols to integrate seamlessly with the San Francisco system font, so the symbols automatically ensure optical vertical alignment with text for all weights and sizes. SF Symbols are available in a wide range of weights and scales to help you create adaptable designs.<\/p>\n

[…]<\/p>\n

SF Symbols come in nine weights—from ultralight to black—each of which corresponds to a weight of the San Francisco system font. This correspondence lets you achieve precise weight matching between symbols and adjacent text, while supporting flexibility for different sizes and contexts.<\/p>\n<\/blockquote>\n\n

Ryan Jones<\/a>:<\/p>\n

\n

These SF Symbols are so so clean.<\/p>\n<\/blockquote>\n\n

Eli Schiff<\/a>:<\/p>\n

\n

One thing that no one has noticed is that these icons for SF Symbols have “Ink Traps” since they’ll be used for print and not UI.<\/p>\n

And if they’re used for UI, that’s a major major failure.<\/p>\n<\/blockquote>\n\n

Marc Edwards<\/a>:<\/p>\n

\n

If this is the quality we can expect, it’s going to be difficult to recommend SF Symbols for anything other than rough prototypes.<\/p>\n

I believe the icons looking blurry is inherent in the technique, and near impossible to work around, even for icons we make ourselves. I guess I’m sticking with PNGs for everything.<\/p>\n

It’s worth noting those issues are extremely easy to see from a normal viewing distance on device.<\/p>\n<\/blockquote>\n\n

Joshua Emmons<\/a>:<\/p>\n

\n

“206 – Introducing SF Symbols<\/a>” is unexpectedly deep. Apple baked a ton of thought and flexibility into symbols. Defintiely go back and check it out if you’ve missed it.<\/p>\n<\/blockquote>\n\n

Wil Shipley<\/a>:<\/p>\n

\n

There’s a macOS app for SF Symbols but...also macOS is the only platform where SF Symbols aren’t supported.<\/p>\n

That is...poor.<\/p>\n<\/blockquote>\n\n

Mark Munz<\/a>:<\/p>\n

\n

As Mac developer, I have to write UIKit-based app just to get SF Symbols on Mac (even with SwiftUI)? Apparently.<\/p>\n

With SF Symbols, no matter what they say, Apple is basically giving 🖕to AppKit.<\/p>\n

Native (AppKit) Apps will now be second-class on their own platform. 😞<\/p>\n<\/blockquote>\n\n

Jeff Nadeau<\/a>:<\/p>\n

\n

AppKit already caches raster renditions of vector images generically. It would be great to expose symbols on NSImage<\/code>, but there are some prerequisites to work out before that can happen.<\/p>\n<\/blockquote>\n\n

Benjamin Mayo<\/a>:<\/p>\n

\n

SF Symbols has some frustratingly restrictive rules for certain glyphs. E.G Safari uses the open book icon to mean ‘Bookmarks’, but Apple won’t let a third-party app use it to mean anything other than ‘Apple Books’.<\/p>\n<\/blockquote>\n\n

Benjamin Mayo<\/a>:<\/p>\n

\n

Every phone icon in the SF Symbols set is reserved to exclusively mean Apple’s Phone app. All envelopes are for Apple Mail only. Seems dumb.<\/p>\n<\/blockquote>\n\n

Austin Tooley<\/a>:<\/p>\n

\n

Weird. In a session earlier today an Apple engineer used the envelope symbol for a login UI.<\/p>\n<\/blockquote>\n\n

Kyle Howells<\/a>:<\/p>\n

\n

No one is actually going to pay any attention to these usage restrictions. Apple itself didn’t in the SwiftUI demo.<\/p>\n

Using the “video.fill” symbol (which says only to use for FaceTime) to show the demo conference room had video conferencing support.<\/p>\n<\/blockquote>\n\n

Wil Shipley<\/a>:<\/p>\n

\n

Apple: “Here are 𝘧𝘪𝘧𝘵𝘦𝘦𝘯 different symbols all of which may 𝗼𝗻𝗹𝘆 refer to Apple’s Phone app. Why fifteen instead of just one? Because what you want in buttons that refer to a single app is 𝘷𝘢𝘳𝘪𝘦𝘵𝘺.”<\/p>\n

“If you need to illustrate the concept of a phone but not the ‘Phone’ app, please use any of a hundred free icons on https:\/\/thenounproject.com that look very much like these but are slightly different and users won’t know the difference because 15 varieties come with the system.”<\/p>\n<\/blockquote>\n\n

Chuck Toporek<\/a>:<\/p>\n

\n

Thing I tried: Many of the SF Symbols are also Unicode, which means you can target them on the web, with font-family: -apple-system;<\/code> in your CSS. So cool. :)<\/p>\n<\/blockquote>\n\n

Howard Oakley<\/a>:<\/p>\n

\n

Although these look the business, they take us into a morass which is almost worse than not having them at all.<\/p>\n<\/blockquote>\n\n

JP Simard<\/a>:<\/p>\n

\n

That was quick! A Swift Package providing type-safe accessors to iOS 13’s SF System images 🚀<\/p>\n<\/blockquote>\n\n

Matt Diephouse<\/a>:<\/p>\n

\n

I really hope that Apple revisits the SFSymbols API and chooses to provide compile-time constants instead of just strings.<\/p>\n

That would:<\/p>\n

1. Let Apple use @available to add\/deprecate symbols
\n2. Aid discoverability of icons
\n3. Let the compiler catch typos<\/p>\n

Those seem like big wins.<\/p>\n<\/blockquote>\n\n

Update (2019-06-12): Elliott Pogue<\/a>:<\/p>\n

\n

The clipping is definitely a bug. Re: the pixel grid... I don’t think Apple gives a high priority to pixel precision anymore. For instance, my 2018 15” MBP was set to 1680x1050 by default, not the true 2x 1440x900.<\/p>\n<\/blockquote>\n\n

Marc Edwards<\/a>:<\/p>\n

\n

Yep, and that’s such a poor choice for the default display scaling. Combined with SF Symbols, you’re getting double damage. With Project Catalyst, triple. I don’t understand these choices. It makes their hardware look terrible.<\/p>\n<\/blockquote>\n\n

Marc Edwards<\/a>:<\/p>\n

\n

A very quick comparison GIF with some pixel snapped icons. It worries me that Apple are going to trash the quality of their icons across all their platforms in a single move.<\/p>\n<\/blockquote>\n\n

Update (2019-06-18): Marc Edwards<\/a>:<\/p>\n

\n

iOS 13 beta 2 didn’t improve SF Symbol quality. I think there’s two separate issues: The clipping, which is fixable. And, the blurriness, which is not fixable while continuing to use the same technique.<\/p>\n

[…]<\/p>\n

There’s also a third issue: The method required for authoring icons is incredibly manual, requiring a file per icon. That’s just not how anyone building a library of icons for an app or design system should be working. Everything should be as automated as possible.<\/p>\n

[…]<\/p>\n

They’re built to a 100pt font grid that doesn’t match any pixel size I am aware of.<\/p>\n<\/blockquote>\n\n

Marc Edwards<\/a>:<\/p>\n

\n

Yep, that that undoes a lot of the good work of the hardware teams, plus these things are cumulative. SF Symbols + Project Catalyst + MacBook Pro display scaling means a vector icon is rendered with fractional offsets, bitmap scaled by 77%, then bitmap scaled again.<\/p>\n<\/blockquote>\n\n

Update (2019-07-18): Marc Edwards<\/a>:<\/p>\n

\n

Are SF Symbols still bad? Yes. Here’s a comparison between Calendar and Safari in iOS 12 vs iOS 13. Stylistic choices aside, the iOS 13 icons are a smudgy mess.<\/p>\n

SF Symbols as a concept is funadamentally broken. Icons can not be as high quality as previously. This affects all system icons, across many OSs. I expect more from Apple.<\/p>\n

There’s zero chance we’ll be using SF Symbols for icons as they currently stand.<\/p>\n<\/blockquote>\n\n

Update (2019-08-22): Julian Schiavo<\/a>:<\/p>\n

\n

Stuff like the bookmark icon is no longer restricted to use to refer to Apple Books<\/p>\n<\/blockquote>","protected":false},"excerpt":{"rendered":"

Apple: SF Symbols provides a set of over 1,500 consistent, highly configurable symbols you can use in your app. Apple designed SF Symbols to integrate seamlessly with the San Francisco system font, so the symbols automatically ensure optical vertical alignment with text for all weights and sizes. SF Symbols are available in a wide range […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"2019-06-10T21:02:31Z","apple_news_api_id":"e93d0a11-3fbd-4910-a2ed-3fb35a02045b","apple_news_api_modified_at":"2019-08-22T17:42:10Z","apple_news_api_revision":"AAAAAAAAAAAAAAAAAAAAAw==","apple_news_api_share_url":"https:\/\/apple.news\/A6T0KET-9SRCi7T-zWgIEWw","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[2],"tags":[1621,77,133,545,31,1667,30,1666,1822],"class_list":["post-25607","post","type-post","status-publish","format-standard","hentry","category-technology","tag-marzipan","tag-design","tag-font","tag-icons","tag-ios","tag-ios-13","tag-mac","tag-macos-10-15","tag-sf-symbols"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/25607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=25607"}],"version-history":[{"count":5,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/25607\/revisions"}],"predecessor-version":[{"id":26360,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/25607\/revisions\/26360"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=25607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=25607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=25607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}