How can I dynamically change the icon of a control center widget?
Asked on 07/30/2024
1 search
To dynamically change the icon of a control center widget, you can use the new API introduced in iOS 18. This process involves creating a control, which is a special type of widget, and configuring it to display different symbols based on its state.
Here are the steps to achieve this:
-
Define the Control: Start by defining a control using the same underlying architecture as widgets. Controls can be buttons or toggles, and they use app intents to perform actions.
-
Provide Required Information: Your app needs to provide a symbol, title, tint color, and additional content to the system. This information allows the system to display the control contextually in control center.
-
Customize the Symbol Based on State: You can customize the control to display different symbols based on its state. For example, you can use the
isOn
argument to the closure to display a different symbol when the control is on or off. This is demonstrated in the session "Extend your app’s controls across the system":- When the control is on, display a flowing hourglass symbol to indicate that time is counting down.
- When the control is off, display a different symbol.
-
Update the Control's Value Text: You can also refine the value text to better match the control's state. For instance, instead of displaying "on" and "off," you can display "running" and "stopped" for a timer control.
For a detailed walkthrough, you can refer to the session Extend your app’s controls across the system (04:11).
Relevant Sessions
- Extend your app’s controls across the system
- Bring your app’s core features to users with App Intents
These sessions provide comprehensive guidance on building and configuring controls, including how to dynamically change their icons based on state.

Bring your app’s core features to users with App Intents
Learn the principles of the App Intents framework, like intents, entities, and queries, and how you can harness them to expose your app’s most important functionality right where people need it most. Find out how to build deep integration between your app and the many system features built on top of App Intents, including Siri, controls and widgets, Apple Pencil, Shortcuts, the Action button, and more. Get tips on how to build your App Intents integrations efficiently to create the best experiences in every surface while still sharing code and core functionality.

Platforms State of the Union
Discover the newest advancements on Apple platforms.

Extend your app’s controls across the system
Bring your app’s controls to Control Center, the Lock Screen, and beyond. Learn how you can use WidgetKit to extend your app’s controls to the system experience. We’ll cover how you can to build a control, tailor its appearance, and make it configurable.