Create and Style App Shortcuts in iOS Using AppShortcutsProvider
A step-by-step guide to creating App Shortcuts using AppIntent and styling them with custom tint, solid background, and gradient backgrounds in iOS.
What are App Shortcuts?
App Shortcuts let users run actions inside your app from the Shortcuts app, Spotlight, and Siri without opening the app first. Each App Shortcut is backed by an AppIntent that defines what the action does. When you register your intents through an AppShortcutsProvider, iOS automatically lists them inside the Shortcuts app under your app’s name.
Apple introduced the App Intents framework at WWDC 2022 with iOS 16. The framework replaced the older SiriKit Intents for most use cases and made it possible to expose actions to Shortcuts with very little code.
This tutorial is built for Xcode 15 or above and iOS 17 or above.
By the end of this article, we are going to learn:
How to create a simple App Shortcut using AppIntent and AppShortcutsProvider
- How to style the shortcut with a custom tint color and one background color
- How to upgrade the background to a multi-color gradient
- How to configure Light and Dark mode variants for the tile
- How the styled shortcuts appear in Spotlight search
Let the coding begin..!
1. Create a Simple App Shortcut Using AppIntent
For this tutorial, we are going to create four example shortcuts in our app:
- Start Reading
- Unlock Social Apps
- Check Available Minutes
- Lock Distracting Apps Now
Each shortcut, when tapped from the Shortcuts app, will open our app at a specific screen. Our focus is the Shortcuts side, so we will assume the app already handles the redirection.
Define the AppIntent
Each shortcut needs an AppIntent. Since all four shortcuts behave similarly, we will write one implementation and the remaining shortcuts will follow the same pattern.
@available(iOS 16, *)
struct StartReadingIntent: AppIntent {
static let title: LocalizedStringResource = "Start Reading"
static var description: IntentDescription = IntentDescription(
"Start reading by blocking distracting apps",
categoryName: "Navigation")
/// Launch your app when the system triggers this intent.
static let openAppWhenRun: Bool = true
/// Define the method that the system calls when it triggers this event.
@MainActor
func perform() async throws -> some IntentResult & OpensIntent {
let url = URL(string: "readrlock://start-reading")!
await UIApplication.shared.open(url)
return .result()
}
}A few things to notice:
- @available(iOS 16, *) marks the intent as iOS 16+. App Intents was introduced in iOS 16, so this guard is required if your deployment target is older.
- title is the user-facing name shown in the Shortcuts app.
- description is the secondary text shown under the title in the Shortcuts app and in Spotlight. The `categoryName` groups related intents.
- openAppWhenRun = true brings our app to the foreground when the shortcut is run.
- Inside perform(), we open a deeplink URL. The app is responsible for handling the URL and routing to the correct screen.
@available(iOS 16, *)
struct UnlockDistractingAppIntent: AppIntent {
static let title: LocalizedStringResource = "Unlock Distracting Apps"
static var description: IntentDescription = IntentDescription(
"unlock distracting apps in the app.",
categoryName: "Navigation")
/// Launch your app when the system triggers this intent.
static let openAppWhenRun: Bool = true
/// Define the method that the system calls when it triggers this event.
@MainActor
func perform() async throws -> some IntentResult & OpensIntent {
let url = URL(string: "readrlock://unlock-social-apps")!
await UIApplication.shared.open(url)
return .result()
}
}Do the same for ViewAvailableMinutesIntent and LockAppsIntent. Each one points to its own deeplink path.
Register Them With AppShortcutsProvider
import AppIntents
import UIKit
@available(iOS 16, *)
struct MygateAppIntentShortcutsProvider: AppShortcutsProvider {
@AppShortcutsBuilder
static var appShortcuts: [AppShortcut] {
AppShortcut(
intent: StartReadingIntent(),
phrases: [
"Start reading by blocking distracting apps using \(.applicationName)",
],
shortTitle: "Start Reading",
systemImageName: "apple.books.pages.fill"
)
AppShortcut(
intent: UnlockDistractingAppIntent(),
phrases: [
"Unlock social apps using \(.applicationName)",
],
shortTitle: "Unlock Apps",
systemImageName: "lock.open.fill"
)
AppShortcut(
intent: ViewAvailableMinutesIntent(),
phrases: [
"Check available minutes in \(.applicationName)"
],
shortTitle: "Available Minutes",
systemImageName: "clock.circle.fill"
)
AppShortcut(
intent: LockAppsIntent(),
phrases: [
"Lock Distracting Apps using \(.applicationName)",
],
shortTitle: "Lock Apps",
systemImageName: "lock.circle.fill"
)
}
}A few things to notice:
- AppShortcutsBuilder is the result builder that lets you list AppShortcut instances directly without commas or array brackets.
- Phrases is the list of natural-language triggers Siri can match. Use \(.applicationName) so iOS injects the user-visible app name.
- shortTitle is the label shown on the tile in the Shortcuts app. Keep it short, two or three words.
- systemImageName is an SF Symbol name. Pick one that visually represents the action.
Build and run. Open the Shortcuts app, search for your app name, and you will see all four shortcuts listed.
This is the default look. Plain gray background with the system blue tint. From here we can start styling.
2) Style App Shortcuts With Tint Color and One Background Color
The styling for App Shortcuts does not live in Swift. It lives in Info.plist. iOS reads these keys at install time and applies them to the Shortcuts tile.
We will start with the simplest version. One tint color for the icon and one background color for the tile.
Step 1: Add Color Assets
Open Assets.xcassets and add two new Color Sets:
- ShortcutsBackground — the background fill of the tile
- ShortcutsIconTintForeground — the color of the SF Symbol shown on top
Make sure both colors have values for Light and Dark appearance, or the tile will fall back to the default gray when the user switches modes.
Step 2: Add the Info.plist Keys
<key>CFBundleIcons</key>
<dict>
<key>CFBundlePrimaryIcon</key>
<dict>
<key>NSAppIconActionTintColorName</key>
<string>ShortcutsIconTintForeground</string>
<key>NSAppIconComplementingColorNames</key>
<array>
<string>ShortcutsBackground</string>
</array>
</dict>
</dict>The CFBundleIcons wrapper is required. Without it, iOS ignores everything inside it, and your tile stays gray.
Step 3: Understanding Each Key
Let’s go through each key so you know what you are configuring:
CFBundleIcons— the parent dictionary iOS reads for all icon configuration. Mandatory wrapper.CFBundlePrimaryIcon— the active icon entry. This is where the App Shortcut tile config lives.NSAppIconActionTintColorName— the color of the symbol drawn on top of the tile. The string value must match a Color Set name inAssets.xcassetsexactly.NSAppIconComplementingColorNames— an array of color names used to fill the tile background. With one entry, iOS renders a solid fill.
Step 4: Build and Check
The tile is now branded. The symbol uses ShortcutsIconTintForeground. The background fills with ShortcutsBackground.
3) Style App Shortcuts With a Multi-Color Gradient Background
Once the solid version is working, the upgrade to a gradient is one extra color asset and one extra entry in the Info.plist array.
Step 1: Add the Second Background Color
Add another Color Set to Assets.xcassets:
- ShortcutsBackground2 — the second color of the gradient
Step 2: Update the Info.plist
Extend the NSAppIconComplementingColorNames array to include both background colors:
<key>CFBundleIcons</key>
<dict>
<key>CFBundlePrimaryIcon</key>
<dict>
<key>NSAppIconActionTintColorName</key>
<string>ShortcutsIconTintForeground</string>
<key>NSAppIconComplementingColorNames</key>
<array>
<string>ShortcutsBackground1</string>
<string>ShortcutsBackground2</string>
</array>
</dict>
</dict>Step 3: Understanding the Gradient Behavior
The same key, NSAppIconComplementingColorNames, controls both solid and gradient backgrounds. The number of entries decides what iOS does:
- One entry — solid fill using that colo
- Two entries — vertical gradient interpolated between the two named colors. The first entry is the top of the gradient, the second is the bottom.
Step 4: Build and Check
The four shortcut tiles now render with a smooth gradient from ShortcutsBackground1 at the top to ShortcutsBackground2 at the bottom, with the symbol in the foreground tint.
4) Configure Light Mode and Dark Mode for App Shortcuts
iOS renders App Shortcut tiles in both Light and Dark mode based on the user’s system setting. The colors come from your Color Sets in Assets.xcassets, so dark mode support is configured at the asset level — not in Info.plist.
When you create a Color Set, Xcode shows a single “Any Appearance” slot by default. To support dark mode, you need to add a Dark Appearance slot and set its color separately.
5) How App Shortcuts Appear in Spotlight Search
Once your shortcuts are registered, they also appear in Spotlight search. When the user pulls down from the home screen and types your app name or one of the shortcut titles, the shortcuts show up directly as actions inside the search results.
The styling we configured through CFBundleIcons carries over to the Spotlight surface as well. Users see the same branded tiles whether they open the Shortcuts app or pull down to search.
Conclusion
We created four App Shortcuts using AppIntent and AppShortcutsProvider, then styled them in stages. First, we created a solid branded background with a custom tint color. Then a multi-color gradient background using two named colors. We also configured Light and Dark mode variants at the Color Set level, and saw how the styled tiles carry over into Spotlight search.
This tutorial is built for Xcode 15+ and iOS 17+.
I hope you found this article helpful. If you did, please don’t hesitate to clap or share this post on Twitter or your social media of choice, every share encourages me to write more. If you have any questions, feel free to comment below and I’ll see what I can do. Thanks.
Let’s connect!
