SF Symbols Changes in iOS 15.0
Introduction
In WWDC 2021: What’s New in SF Symbols, Apple announced SF Symbols 3. There are approximately 660 new symbols, multicolor symbols now work correctly in UIKit, and there are two new rendering modes with enhanced color customisation: hierarchical and palette.
There are now five different sets of symbols to consider:
- SF Symbols v1.1 available in iOS/iPadOS/tvOS/Mac Catalyst 13.0, watchOS 6.0 and macOS 11.0
- SF Symbols v2.0 available in iOS/iPadOS/tvOS/Mac Catalyst 14.0, watchOS 7.0 and macOS 11.0
- SF Symbols v2.1 available in iOS/iPadOS/tvOS/Mac Catalyst 14.2, watchOS 7.1 and macOS 11.0
- SF Symbols v2.2 available in iOS/iPadOS/tvOS/Mac Catalyst 14.5, watchOS 7.4 and macOS 11.3
- SF Symbols v3.0 available in iOS/iPadOS/tvOS/Mac Catalyst 15.0, watchOS 8.0 and macOS 12.0
An app can only use symbol names that are supported by the OS version it is running on. Symbols that were renamed are still available using their earlier names for backwards compatibility. However, Jiang Jiang (who appears to work at Apple) mentioned on Twitter that:
It is worth noticing that while aliased (old) names continue to work it is definitely better to migrate to the up-to-date names for performance reasons.
The minimum iOS deployment version of your app will determine which symbols you can use and whether you must keep using the older names (or use runtime availability checks to use the new names on later versions).
For a detailed list of symbols that were added or renamed in iOS 14 (SF Symbols 2), see my earlier article SF Symbols Changes in iOS 14.0. For changes in iOS 14.2 (SF Symbols 2.1), see SF Symbols Changes in iOS 14.2. For changes in iOS 14.5 (SF Symbols 2.2), see SF Symbols Changes in iOS 14.5.
The purpose of this article is to describe what has changed in SF Symbols in iOS 15, not how to write code to use the new features. The “Resources” section towards the end of this article has links to some WWDC videos and blog posts which explain how to use the new features.
SF Symbol Browsing Apps
Apple updated their SF Symbols Mac app to support the new symbols and rendering modes in iOS 15 and released a few beta versions during the iOS 15 beta cycle:
A final version 3.0 build (60) was released on 30th September and includes the symbols as of the public iOS 15 release. For more information about the app, see WWDC 2021: Explore the SF Symbols 3 app. Apple never released v2.2 and so the symbols added in iOS 14.5 were not included until v3.0.
A number of iOS apps are available on the App Store for browsing SF Symbols. Some of them have not kept up to date with all the additions, renames and changed categorisation of symbols over time. A few require iOS 15 and, whilst they do show the latest data (as far as I can tell), they cannot view earlier data sets with older names for symbols that have been renamed.
My own Adaptivity app is a tool for iOS developers and designers, and one of its many features is a very comprehensive view to browse SF Symbols. It can view any of the SF Symbol data sets that your device supports. I take great pride and invest a lot of time and effort in keeping it up to date. The iPhone and iPad screenshots in this article were taken from Adaptivity v8.1 and demonstrate the symbol changes in iOS 15 and new rendering modes.
Changes in SF Symbols 3
iOS/iPadOS 15 was publicly released on 20th September 2021. There are far too many changes to SF Symbols to list them all in detail. The changes fall into several different categories:
- New symbols Over 660 new symbols have been added; some have restricted usage
- Renamed symbols 132 existing symbols have been renamed
- Multicolor symbols Over 700 more symbols have multicolor support
- Hierarchical / Palette rendering 2,272 symbols support the new rendering modes
- Localized variants More right-to-left localized symbols, more localized versions of symbols which include letters, punctuation or numeric digits
There are 793 symbols in the ‘What’s New’ category on iOS 15 but some of them are renamed versions of existing symbols rather than completely new symbols (see below for more information).
Restricted Symbols
A red ⓘ button indicates a symbol is restricted. Tapping the button shows an alert explaining how the symbol can be used. Adaptivity also has a custom ‘Restricted’ collection which shows just the restricted symbols. The number of restricted symbols has increased from 151 in iOS 14.5 to 257 in iOS 15:
Added Symbols
Over 660 symbols were added in iOS 15. However, a few are variants of existing symbols with support for right-to-left localization (e.g. using leading and trailing instead of left and right), so the number of truly new symbols is slightly lower.
Adaptivity’s ‘Availability’ annotation (selected from the Info icon in the bottom right) adds a small 15+ annotation to symbols which are new in iOS 15. To make it easier to see which symbols are not supported in iOS 13, there is no annotation shown for symbols that were available in iOS 13 (unless they were renamed since; see below for more information).
Adaptivity also has a custom ‘Added’ collection which shows all the symbols that have been added in the data set you are viewing:
Renamed Symbols
Over 130 symbols have been renamed in iOS 15. For apps that support earlier iOS versions, the older names must be used. When running on iOS 15, either name can be used.
As in the past, there appears to be several different reasons for renames:
- Naming E.g. a number of names containing
fillhave becomefilled - Word order consistency E.g.
tablecells.badge.ellipsis.fillis nowtablecells.fill.badge.ellipsis - More descriptive names E.g.
lasso.sparklesis nowlasso.and.sparkles
When the right sidebar is enabled, Apple’s SF Symbols Mac app shows availability information and, if applicable, the deprecated name for the selected symbol.
Adaptivity makes it easy to see renamed symbols. When the ‘Availability’ annotation is enabled, a list of iOS versions is shown for symbols that have been renamed since they were first added. For example, a 15+,14 annotation indicates that a symbol was added in iOS 14 but has been renamed in iOS 15. Some symbols have been renamed multiple times, e.g. star.leadinghalf.filled shows a 15+,14,13 annotation to indicate it was available in iOS 13, renamed in iOS 14 and renamed again in iOS 15.
Adaptivity also has a custom ‘Renamed’ collection which shows all the symbols that have been renamed in the data set you are viewing:
A long press on a symbol shows a larger image in a context menu preview, along with the symbol name, availability, any deprecated names, and supported rendering modes. You can quickly copy the name to the clipboard (and, thanks to Universal Clipboard, this will be available for pasting into your code on another device). For symbols that have been renamed, choose which version to copy. The List view also shows the availability information and any deprecated names in each table cell:
Multicolor Symbols
SF Symbols added support for multicolor in iOS 14. Unfortunately, these did not render correctly at most weights, scales and content size categories in UIKit. Mac Catalyst apps are effectively UIKit, so they exhibited the same issues. I think SwiftUI and AppKit did render them correctly. In iOS 15, all multicolor symbols now render correctly in UIKit.
There are 871 symbols in the ‘Multicolor’ category, an addition of 708 to iOS 14.5’s 163 symbols. Most of these are existing symbols rather than symbols that have been added in iOS 15.
Adaptivity’s ‘Render Mode’ setting (selected from the Info icon in the bottom right) allows multicolor rendering to be selected. Multicolor symbols fall into several categories:
- all fixed colors (e.g.
cloud.sun.rain.fill). - some fixed colors, some parts colored with the tint color (e.g.
folder.badge.plus). - cut-outs replaced with solid white (e.g.
pencil.circle.fill). The remaining parts are either fixed or tinted
The tint color is configurable in Adaptivity. It defaults to systemMint as that doesn’t seem to be used as a fixed color in any symbols, making it slightly easier to see which parts of a symbol are tinted and which are a fixed color.
When multicolor rendering is selected, symbols that don’t support multicolor will be shown in monochrome and tinted with this color. A gray background is shown behind each image to make it easier to distinguish between fixed white and transparent parts of the image. This is even clearer in dark mode.
Hierarchical and Palette Symbols
Two new rendering modes were added in iOS 15: hierarchical and palette. Adaptivity has a ‘Hierarchical / Palette’ category which shows the 2,272 symbols that support these rendering modes. Every symbol which supports one of these modes also supports the other: they always occur together.
Symbols supporting these rendering modes contain two or three layers. In hierarchical rendering, a single base color is used for the primary layer. Secondary and tertiary layers (where applicable) use different opacities of that base color. The base color is configurable in Adaptivity.
In palette rendering, the colors for each layer can be configured separately:
Localized Variants
Symbols that contain letters (e.g. textformat.size) show non-English characters in place of the “A”. Some symbols (e.g. thegoforward.5 etc. series of symbols) show the numerals in Arabic or Hindi. When the right sidebar is enabled, Apple’s SF Symbols Mac app shows localization information for the selected symbol.
Adaptivity has an optional language localization annotation (a globe icon) to identify symbols with language localizations. Adaptivity also has a custom ‘Language Localized’ collection to make them easy to find. iOS 15 increases the number of symbols with language localizations to 62 (compared with iOS 14.5’s 52).
Long pressing a symbol with a language localization reveals a “Show Localizations” context menu action which presents another view showing the localized variants. If the ‘Availability’ annotation is enabled, each variant will show the iOS version in which it was first available (unless it was iOS 13).
Some symbols appear partially or fully horizontally-flipped in right-to-left localizations. Adaptivity has an optional right-to-left annotation (⇄) to identify symbols that have right-to-left localizations. Adaptivity also has a custom ‘Right-to-Left Localized’ collection to make them easy to find. iOS 15 increases the number of symbols with right-to-left localizations to 334 (compared with iOS 14.5’s 251).
Some of the symbols with right-to-left localizations are separate symbols so that a non-right-to-left localized version is also available. Apple uses words such as left and right for symbols which are not right-to-left localized and words such as leading, trailing, forward and backward for symbols which are right-to-left localized.
As with language localizations, a long press on a right-to-left localized symbol reveals a “Show Localizations” context menu action to show both left-to-right and right-to-left variants (and any language localizations if the symbol is also localized to other languages):
Adaptivity also has an option in its setting screen to force a right-to-left layout. This flips the entire user interface in the same way as the Right-to-Left Pseudolanguage option that can be configured in Xcode’s scheme settings when running your own app. The order in which the symbols are listed flips left-to-right (because the whole user interface flips), but only the right-to-left localized symbols actually change appearance. The “Show Localizations” context menu action is still available to also view the left-to-right variant.
Changes During the iOS 15 Beta
To help developers keep up with changes during the beta cycle, Adaptivity had custom collections to show the changes in beta 2, beta 4 and beta 5. I made these available in public TestFlight builds and also updated the App Store version of Adaptivity to show these collections when run on iOS/iPadOS 15 beta. Even though the App Store builds at that time had to be built with Xcode 12 (and could not use iOS 15 APIs), it was still possible to show the new symbols since the images are loaded via their names as strings.
These custom collections were removed after iOS/iPadOS 15 was publicly released and Adaptivity’s big iOS 15 update was released in the App Store. Earlier versions of this article highlighted the changes that occurred during the beta and I have retained that information below. This is perhaps still interesting and useful as an insight into the kinds of changes that took place during the beta.
Symbols added in iOS 15 which were then renamed in a later beta will not be available under their old names; backwards compatibility only exists for renamed symbols whose original name was in a released version of iOS. Neither Adaptivity nor Apple’s SF Symbols app will show names that only existed during the beta cycle.
iOS 15 Beta 2
There were changes to 53 symbols in iOS 15 beta 2. Later versions of Adaptivity only showed 48 because 5 of them were renamed in beta 5 and the beta 2 names no longer worked.
The 4 filled digital crown images added in iOS 15 had the position of the fill moved to the end:
digitalcrown.arrow.clockwise.fill
digitalcrown.arrow.counterclockwise.fill
digitalcrown.horizontal.arrow.clockwise.fill
digitalcrown.horizontal.arrow.counterclockwise.fill5 symbols that existed before iOS 15 were renamed. One is a change from using fill to filled:
rectangle.inset.fill → rectangle.inset.filledThe 4 other renamed symbols were renamed again in beta 5 so the “new” names listed below will not work on beta 5 or later:
rectangle.3.offgrid → rectangles.grouprectangle.3.offgrid.fill → rectangles.group.fillrectangle.3.offgrid.bubble.left → rectangles.group.bubble.leftrectangle.3.offgrid.bubble.left.fill → rectangles.group.bubble.left.fill
44 new images were added but landscape.artframe was renamed photo.artframe in beta 5 and was no longer included in Adaptivity’s beta 2 collection:
airtag
airtag.fill
airtag.radiowaves.forward
airtag.radiowaves.forward.fill
alternatingcurrent
antenna.radiowaves.left.and.right.slash
applewatch.case.inset.filled
cable.connector.horizontal
chart.line.uptrend.xyaxis.circle
chart.line.uptrend.xyaxis.circle.fill
circle.dotted
digitalcrown.horizontal.press
digitalcrown.horizontal.press.fill
digitalcrown.press
digitalcrown.press.fill
ear.and.waveform
gear.badge.checkmark
gear.badge.questionmark
gear.badge.xmark
globe.badge.chevron.backward
hand.raised.square.on.square
hand.raised.square.on.square.fill
iphone.homebutton.radiowaves.left.and.right.circle
iphone.homebutton.radiowaves.left.and.right.circle.fill
iphone.radiowaves.left.and.right.circle
iphone.radiowaves.left.and.right.circle.fill
landscape.artframe
network.badge.shield.half.filled
person.badge.clock
person.badge.clock.fill
person.crop.circle.badge.clock
person.crop.circle.badge.clock.fill
person.wave.2
person.wave.2.fill
plus.square.dashed
point.3.connected.trianglepath.dotted
point.3.filled.connected.trianglepath.dotted
rectangle.inset.filled.and.person.filled
shareplay.slash
slider.horizontal.2.rectangle.and.arrow.triangle.2.circlepath
sparkles.tv
sparkles.tv.fill
teletype.answer.circle
teletype.answer.circle.fill
iOS 15 Beta 3
Beta 3 didn’t add or rename any symbols.
iOS 15 Beta 4
There were changes to 74 symbols in iOS 15 beta 4. Two symbols that existed before iOS 15 were renamed:
doc.text.fill.viewfinder → doc.viewfinder.filldoc.text.viewfinder → doc.viewfinder
These symbols also changed their appearance and, as a result, no longer have right-to-left localizations. Duraid Abdul tweeted that the humidity symbols also changed their appearance. The screenshots below show these symbols in iOS 15 beta 3 (left) and beta 4 (right):
72 new images were added. Most of these are adding .circle and .circle.fill variants of existing symbols. The Beats Studio Buds and MagSafe symbols are restricted:
align.horizontal.center
align.horizontal.center.fill
align.horizontal.left
align.horizontal.left.fill
align.horizontal.right
align.horizontal.right.fill
align.vertical.bottom
align.vertical.bottom.fill
align.vertical.center
align.vertical.center.fill
align.vertical.top
align.vertical.top.fill
beats.studiobud.left
beats.studiobud.right
beats.studiobuds
beats.studiobuds.chargingcase
beats.studiobuds.chargingcase.fill
book.closed.circle
book.closed.circle.fill
books.vertical.circle
books.vertical.circle.fill
bubble.left.circle
bubble.left.circle.fill
bubble.right.circle
bubble.right.circle.fill
building.columns.circle
building.columns.circle.fill
clock.circle
clock.circle.fill
cup.and.saucer
cup.and.saucer.fill
diamond.circle
diamond.circle.fill
dot.circle.viewfinder
dot.viewfinder
drop.circle
drop.circle.fill
ellipsis.curlybraces
exclamationmark.bubble.circle
exclamationmark.bubble.circle.fill
figure.roll
flame.circle
flame.circle.fill
graduationcap.circle
graduationcap.circle.fill
hourglass.circle
hourglass.circle.fill
lightbulb.circle
lightbulb.circle.fill
magsafe.batterypack
magsafe.batterypack.fill
mappin.slash.circle
mappin.slash.circle.fill
newspaper.circle
newspaper.circle.fill
pills.circle
pills.circle.fill
quote.closing
quote.opening
rectangle.center.inset.filled.badge.plus
scissors.circle
scissors.circle.fill
scooter
shippingbox.circle
shippingbox.circle.fill
snowflake.circle
snowflake.circle.fill
sparkle.magnifyingglass
square.and.arrow.up.circle
square.and.arrow.up.circle.fill
stethoscope.circle
stethoscope.circle.fill
iOS 15 Beta 5
There were 31 renamed symbols in iOS 15 beta 4. Two of them were added in the first iOS 15 beta (the original names no longer work):
rectangle.stack.badge.play.crop → rectangle.stack.badge.playrectangle.stack.fill.badge.play.crop.fill → rectangle.stack.badge.play.fill
landscape.artframe was added in beta 2 but is now photo.artframe.
The following four symbols existed before iOS 15, were renamed in beta 2 but have been renamed again. The names on the left are the pre-iOS 15 names (the beta 2 names no longer work):
rectangle.3.offgrid → rectangle.3.grouprectangle.3.offgrid.fill → rectangle.3.group.fillrectangle.3.offgrid.bubble.left → rectangle.3.group.bubble.leftrectangle.3.offgrid.bubble.left.fill → rectangle.3.group.bubble.left.fill
The remaining 24 renames are of symbols that existed before iOS 15:
arrow.up.and.down.righttriangle.up.fill.righttriangle.down.fill → arrow.up.and.down.righttriangle.up.righttriangle.down.fillarrowtriangle.left.fill.and.line.vertical.and.arrowtriangle.right.fill → arrowtriangle.left.and.line.vertical.and.arrowtriangle.right.fillarrowtriangle.right.fill.and.line.vertical.and.arrowtriangle.left.fill → arrowtriangle.right.and.line.vertical.and.arrowtriangle.left.fillcircle.fill.square.fill → circle.square.fillcircle.grid.cross.down.fill → circle.grid.cross.down.filledcircle.grid.cross.left.fill → circle.grid.cross.left.filledcircle.grid.cross.right.fill → circle.grid.cross.right.filledcircle.grid.cross.up.fill → circle.grid.cross.up.filleddpad.down.fill → dpad.down.filleddpad.left.fill → dpad.left.filleddpad.right.fill → dpad.right.filleddpad.up.fill → dpad.up.filledrectangle.stack.fill.badge.person.crop → rectangle.stack.badge.person.crop.fillslider.horizontal.below.square.fill.and.square → slider.horizontal.below.square.filled.and.squaresmallcircle.fill.circle → smallcircle.filled.circlesmallcircle.fill.circle.fill → smallcircle.filled.circle.fillsquare.2.stack.3d.bottom.fill → square.2.stack.3d.bottom.filledsquare.2.stack.3d.top.fill → square.2.stack.3d.top.filledsquare.3.stack.3d.bottom.fill → square.3.stack.3d.bottom.filledsquare.3.stack.3d.middle.fill → square.3.stack.3d.middle.filledsquare.3.stack.3d.top.fill → square.3.stack.3d.top.filledsquare.and.line.vertical.and.square.fill → square.and.line.vertical.and.square.filledsquare.fill.and.line.vertical.and.square → square.filled.and.line.vertical.and.squaresquare.grid.3x1.fill.below.line.grid.1x2 → square.grid.3x1.below.line.grid.1x2.fill
3 new images were added in beta 5:
personalhotspot.circle
personalhotspot.circle.fill
location.magnifyingglass
iOS 15 Beta 6, 7 and 8
Beta 6/7/8 didn’t come with a new Xcode beta making it difficult (at the time) to determine if any changes had been made.
iOS 15 Release Candidate
The release candidate did come with a new Xcode beta. There were no new or renamed symbols compared with beta 5. At the time of the iOS 15 RC release (15th September 2021), Apple’s own SF Symbols app had not been updated since beta 2 and was missing the changes I described above for beta 4 and 5. SF Symbols v3.0 (build 60) was released on 30th September and includes all the changes in the final iOS 15 release.
Resources
Apple
WWDC 2021: 10097, What’s new in SF Symbols
WWDC 2021: 10288, Explore the SF Symbols 3 app
WWDC 2021: 10251, SF Symbols in UIKit and AppKit
WWDC 2021: 10349, SF Symbols in SwiftUI
WWDC 2020: 10207, SF Symbols 2
WWDC 2019: 206, Introducing SF Symbols
Human Interface Guidelines: SF Symbols
Other Articles
SF Symbols Changes in iOS 14.2
SF Symbols Changes in iOS 14.5
The Complete Guide to SF Symbols by Paul Hudson.
SF Symbols: The benefits and how to use them guide by Antoine van der Lee.
Adaptivity
The majority of the screenshots in this article were taken from Adaptivity v8.1. Screenshots showing changes during the beta cycle were taken from pre-release TestFlight builds of v8.0. The public v8.0 release did not include the custom collections highlighting the changes during the beta since, at that time, they were no longer useful.
Adaptivity has many features which can make it more useful than Apple’s SF Symbols app for browsing the symbols:
- runs on your iPhone, iPad and Mac
- limit the view to only include symbols that are available in a specific iOS version (13, 14.0, 14.2, 14.5 or 15), displaying names that are appropriate for that version (which also work on later versions)
- custom category to highlight symbols which support hierarchical and palette rendering modes (they always occur together)
- custom collections to highlight symbols that have been added, renamed, are restricted, or have language or right-to-left localizations
- a collection of your own favorite symbols
- optionally show annotations alongside each symbol to indicate if language or right-to-left localizations are available, or if the symbol was added after iOS 13 or has been renamed (or both)
- optionally show image alignment and baseline information
- long pressing an image shows a larger version and information on language and right-to-left localizations, multicolor/hierarchical/palette rendering modes, iOS version availability and older names (if applicable):
- view a symbol at different scales and weights for a range of dynamic type sizes:
- supports multiple windows on iPad and Mac so that, for example, you can browse two different symbol sets at the same time and compare them:
Adaptivity has many other features. It is primarily a tool to visualize the different window sizes, layout margins, readable content guides, bar heights and Dynamic Type sizes that a modern, adaptive, iOS app uses when running on different devices and iPad multitasking sizes. There are also views for browsing System Colors, System Fonts and System Materials, and a view for exploring iPadOS Pointer Interactions. In iOS/iPadOS 15 you can also configure UISheetPresentationController options for modally-presented view controllers.
The app is a universal purchase and includes the Mac Catalyst version. On macOS 11 and later, this is “optimised for Mac” with native controls and does not scale content. If you are an iOS developer or designer, I’m sure you will find Adaptivity very useful. Testimonials, more screenshots and information on all the features is available on my web site.
Other Articles That You Might Like
I have written articles on How iOS Apps Adapt to the various iPhone 12 Screen Sizes, Bringing Adaptivity to Mac Catalyst, How to Switch Your iOS App and Scene Delegates for Improved Testing and the View Controller Presentation Changes in iOS 13.
The search algorithm used in Adaptivity’s System Colors and System Images views is described in A Simple, Smart Search Algorithm for iOS in Swift. I have also written about Working with Multiple Versions of Xcode and how to Hide Sensitive Information in the iOS App Switcher Snapshot Image.
If you found any of these articles helpful then please take a look at my apps in the iOS App Store to see if there’s anything that you’d like to download (especially the paid ones 😀).
If you work with a lot of Xcode projects you might like my Mac Menu Bar utility XcLauncher. It’s like having browser bookmarks for your favorite Xcode projects, workspaces, playgrounds, and Swift packages. There is more information on my website about XcLauncher’s features.
