How to create tinted icon

To create a tinted icon, you can follow the guidance provided in the session "Extend your app’s controls across the system" from WWDC 2024. Here are the steps:

1. Provide a Tint Color: You can specify a tint color for your icon. For example, if you have a productivity app, you might use a specific shade of purple to match your app's branding.

2. Apply the Tint Color: The tint color will be used to tint the symbol when the toggle is on. This ensures that the symbol and any value text have the specified tint color.

Here is a relevant excerpt from the session:

"Provide a tint color. I'll use the color of my productivity app purple purple for productivity. The tint color will be used to tint the symbol when the toggle is on. Here's the fully styled control working on the lock screen and with the action button using the same code that makes it work in control center when the control is on. The symbol and any value text have the specified tint color."

For more detailed information, you can refer to the session Extend your app’s controls across the system (06:12).

Relevant Sessions

• Extend your app’s controls across the system
• Platforms State of the Union