FREE TRIAL: Accelerate your app development career with Hacking with Swift+! >>

How to get custom colors and transparency with SF Symbols

Paul Hudson    @twostraws   

Updated for Xcode 13.0

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

A symbol showing a smiling mask in the foreground and a fainter sad mask in background.

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

A symbol showing a smiling blue mask in the foreground and a fainter sad blue mask in background.

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

The Apple Shareplay symbol showing a blue person icon in front of two black arcs.

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

Three slightly overlapping person icons, in blue, green, and red from left to right.

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

Three slightly overlapping person icons, in blue, green, and red from left to right. Each icon's color transitions to black as it approaches the bottom right corner.

Hacking with Swift is sponsored by Essential Developer

SPONSORED Join a FREE crash course for iOS devs who want to become complete senior developers — from October 18th to 24th. Learn how to apply iOS app architecture patterns through a series of lectures and practical coding sessions.

Learn more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Similar solutions…

BUY OUR BOOKS
Buy Pro Swift Buy Swift Design Patterns Buy Testing Swift Buy Hacking with iOS Buy Swift Coding Challenges Buy Swift on Sundays Volume One Buy Server-Side Swift (Vapor Edition) Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Advanced iOS Volume Three Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with macOS Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Server-Side Swift (Kitura Edition) Buy Beyond Code

Was this page useful? Let us know!

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.