How to get custom colors and transparency with SF Symbols
Updated for Xcode 14.1
New in iOS 15
If you use SF Symbols in SwiftUI’s Image view, you can get simple colors using the foregroundColor() attribute, or enable their multicolor variants by using .renderingMode(.original). However, for extra flexibility over individual parts of the image, you can use the hierarchical variant or provide a completely custom palette.
Hierarchical rendering uses opacity to create variations in shade on-screen. For example, this will draw the image in transparency to provide extra depth and clarity:
Image(systemName: "theatermasks")
.symbolRenderingMode(.hierarchical)
.font(.system(size: 144))
Download this as an Xcode project
Hierarchical rendering works in combination with foreground color, so you can specify both if you need to:
Image(systemName: "theatermasks")
.symbolRenderingMode(.hierarchical)
.foregroundColor(.blue)
.font(.system(size: 144)) Download this as an Xcode project
For even more power, you can use the .palette variant to get complete control over the colors in the image. So, we could render the SharePlay icon both blue and black at the same time, like this:
Image(systemName: "shareplay")
.symbolRenderingMode(.palette)
.foregroundStyle(.blue, .black)
.font(.system(size: 144)) Download this as an Xcode project
How those colors are applied depends on each individual symbol – sometimes symbols are defined with two layers and sometimes three, and you’ll need to explore them individually to see how they break down.
For symbols that contain three variants, just add an extra color:
Image(systemName: "person.3.sequence.fill")
.symbolRenderingMode(.palette)
.foregroundStyle(.blue, .green, .red)
.font(.system(size: 144)) Download this as an Xcode project
This even works with complex foreground styles, such as providing one gradient for each person in the icon:
Image(systemName: "person.3.sequence.fill")
.symbolRenderingMode(.palette)
.foregroundStyle(
.linearGradient(colors: [.red, .black], startPoint: .top, endPoint: .bottomTrailing),
.linearGradient(colors: [.green, .black], startPoint: .top, endPoint: .bottomTrailing),
.linearGradient(colors: [.blue, .black], startPoint: .top, endPoint: .bottomTrailing)
)
.font(.system(size: 144)) Download this as an Xcode project
SPONSORED In-app subscriptions are a pain to implement, hard to test, and full of edge cases. RevenueCat makes it straightforward and reliable so you can get back to building your app. Oh, and it's free if your app makes less than $10k/mo.
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
