WWDC 2021: For SF Symbols, Cyan is the new Teal
I’ve sort of fallen in love with SF Symbols, Apple’s library of thousands of iconographic representations that’s intended to let app developers build interfaces without custom art while standardizing the look of Apple’s platforms. Recently the SwiftBar utility added SF Symbols support, and I got to modify all my menu-bar status scripts to display little symbols from the SF Symbols library. It’s delightful.
Since it’s WWDC time, it’s an opportunity to get an update on the state of SF Symbols. While a lot of Apple’s stuff is released on an annual cycle in the fall, Apple keeps introducing and updating SF Symbols throughout the year during various OS releases. Overall, according to Apple, there are more than 600 new symbols being added this year, including more images for Apple products, video game controllers, health related symbols, and a bunch of interface and window management icons that go way beyond the three icons used in iPadOS 15 for multitasking.
Coming with the fall releases, however, are two huge additions to the ways SF Symbols can be displayed in apps. In addition to the existing Multicolor and Monochrome modes, symbols can be displayed in Hierarchical or Palette modes.
Hierarchical-formatted symbols are displayed in a single color, but parts of the symbol have varying opacity. This can be especially useful in a group of icons that share characteristics, in order to point out what’s different—imagine a series of text-entry icons that all display multiple lines of text, but different symbols to represent just how clicking on the icon might modify that text. With Hierarchical symbols, the text could be displayed with a reduced opacity, while the important symbols would display at full opacity. That will have the effect of making the important part of the symbol pop, while retaining a consistent color scheme.
Hierarchical symbols can have three different levels of opacity. Apple suggests that shapes that don’t touch be assigned primary and secondary levels, and that shapes that touch or are inside of other objects be assigned a tertiary level, which is 25 percent opacity.
The Palette mode uses multiple colors, but follows the same primary-secondary-tertiary concept as Hierarchical mode. Essentially, Palette mode varies colors rather than opacity. Developers can assign the same color palette to a group of symbols to have them be harmonious, while still fitting in with their apps’ color schemes.
Given Apple’s focus on bringing its platforms together, it’s not surprising that Apple is also working to add consistency in color palettes across all platforms. Brown, a color that was previously available only on the Mac1, is now available across platforms. Apple has also redefined a few colors in order to make them consistent across platforms. Indigo and purple are now more consistent, and teal has been entirely redefined. Fortunately, if you were really attached to the old shade of teal, it’s still available—it’s just been renamed “cyan.”
Finally, among the other new features that SF Symbols will gain this year are a few clever bits of localization: Symbols that include text have been localized for more languages, so for example a page icon with a letter “A” on it in English might appear with appropriate script in Korean. Also, some icons have been optimized for right-to-left scripts — for example, the battery icon would have its bump on the other side in right-to-left languages.
Along with updating symbols, Apple has also updated its SF Symbols app to version 3, with support for custom icons, copying images right out of the app, previews of all the new icon coloring modes, and more.
- A statement that made me snort when I wrote it, but you know what I mean. It wasn’t available for SF Symbols on iPhone, iPad, and Apple Watch. ↩
