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 (currently in beta) 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 SF Symbols 2, please refer to my earlier article SF Symbols Changes in iOS 14. For changes in iOS 14.2, see SF Symbols Changes in iOS 14.2. For changes in iOS 14.5, 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 have updated their SF Symbols Mac app to support the new symbols and rendering modes in iOS 15:
At the time of writing, version 3.0 is in beta and the latest build (56) includes the symbols as of iOS 15 beta 2. It does not include the symbol changes from beta 4. For more information about the app, see WWDC 2021: Explore the SF Symbols 3 app. Note that Apple never released v2.2 and so the symbols added in iOS 14.5 were not included until now.
A number of iOS apps are available on the App Store for browsing SF Symbols. Unfortunately, some of them have not kept up to date with all the additions, renames and changed categorisation of symbols over time.
My own Adaptivity app is a tool for iOS developers and designers, and one of its many features is a comprehensive view to browse SF Symbols. I take great pride and invest a lot of time and effort in keeping it up to date. It does include changes the symbol changes in beta 4. The iPhone and iPad screenshots in this article were taken from a pre-release version of Adaptivity v8.0 in order to demonstrate the symbol changes in iOS 15 and new rendering modes. The current App Store version will show iOS 15 symbols when run on the beta, but cannot show the new rendering modes.
Changes in SF Symbols 3
At the time of writing, iOS 15 is still in beta. If history repeats itself, there are likely to be more renames and new symbols added during the beta cycle. I will keep this article, and Adaptivity, up to date with the changes as they happen.
There are far too many changes 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,259 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 (see below for more information).
The difference in the symbol count in the ‘All’ category between iOS 14.5 and iOS 15 suggests a total of 3,283 − 2,622 = 661 new symbols. However, a few are variants of existing symbols with support for right-to-left localization (e.g. using
trailing instead of
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).
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:
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
- Word order consistency E.g.
- More descriptive names E.g.
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:
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. I think SwiftUI and AppKit did render them correctly. Mac Catalyst apps are effectively UIKit, so they exhibited the same issues. In iOS 15, all multicolor symbols now render correctly in UIKit.
There are 869 symbols in the ‘Multicolor’ category, an addition of 706 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.
- some fixed colors, some parts colored with the tint color (e.g.
- 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,259 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:
Some symbols appear partially or fully horizontally-flipped in right-to-left localizations. Symbols that contain letters (e.g.
textformat.size) show non-English characters in place of the “A”. Some symbols (e.g. the
goforward.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 does not currently identify symbols with localized characters or numbers, but it does have an optional left-to-right annotation (⇄) to identify symbols that have right-to-left localizations. Adaptivity also has a custom ‘Right-to-Left’ collection to make them easy to find. iOS 15 increases the number of symbols with right-to-left localizations to 324 (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
right for symbols which are not right-to-left localized and words such as
backward for symbols which are right-to-left localized.
Adaptivity isn’t localized but it does have 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 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.
Changes During the iOS 15 Beta
To help developers keep up with changes during the beta cycle, Adaptivity has custom collections to show the changes in beta 2, beta 4 and beta 5. I will add more collections if later betas introduce more changes. I will remove these collections when Apple release iOS 15 because it will no longer be very useful to know what changed during the beta cycle.
Note also that symbols added in iOS 15 which are 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. Adaptivity only shows 48 because 5 of them were renamed in beta 5 and the beta 2 names no longer work.
The 4 filled digital crown images added in iOS 15 had the position of the
fill moved to the end:
5 symbols that existed before iOS 15 were renamed. One is a change from using
rectangle.inset.fill → rectangle.inset.filled
The 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 is no longer included in Adaptivity’s beta 2 collection:
iOS 15 Beta 3
Beta 3 didn’t add or rename any symbols, but it might have changed the supported rendering modes for some symbols. I cannot be sure until Apple release a new version of their SF Symbols app and I examine the properties of each image.
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.fill variants of existing symbols. The Beats Studio Buds and MagSafe symbols are restricted:
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
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:
iOS 15 Beta 6, 7 and 8
Beta 6/7/8 didn’t come with a new Xcode beta so I’ve not been able to check if any new symbols have been added. I know there has not been any renames of symbols added (or renamed) in iOS 15 because all the symbol names I used in Adaptivity still work.
It’s possible that some symbols added in earlier iOS versions have been renamed in beta 6/7/8 and the backward-compatibility is keeping the older names working. I cannot be sure until Apple release a new version of their SF Symbols app and I examine the properties of each image.
iOS 15 Release Candidate
The release candidate did come with a new Xcode beta. There are no new symbols compared with beta 5. At the time of writing (15th September 2021), Apple’s own SF Symbols app has not been updated since beta 2.
The screenshots in this article were taken from a pre-release version of Adaptivity v8.0. The app 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 renamed, are restricted, or have right-to-left localizations
- a collection of your own favorite symbols
- optionally show annotations alongside each symbol to indicate if a right-to-left localization is 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 right-to-left localization, 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.