Add a Badge to Your App Icon in SwiftUI

Usually we want to add a badge to our app icon when dealing with notifications in our app. In this simple tutorial will walk through requesting notifications permission from the user, and adding a badge with the notification count to our app icon.

Before we get started, please take a couple of seconds to follow me and 👏 clap for the article so that we can help more people learn about this useful content.

Adding a badge to your app icon

As mentioned above, before we get carried away adding a badge to our app icon, we will need to request access to show the user notifications. Our example only needs the “.badge” option in the requestAuthorization array, however, most apps will request to display alerts, badge, and sound so we have added those options in our example code. If the user chooses not to grant permission to our request for notifications, no badge will be added to the app icon. If you accidentally click the wrong (deny) button when you are working on your own project to test out this code, you can go into the settings, tap on your app, and allow permissions from there to get the plus and minus buttons to add a badge to your app.

For the plus and minus buttons, I have added the code that you will need if you are targeting code before, on, and after iOS 17. The code starting in iOS 17 is asynchronous and can throw an error, so in order to reduce the lines of code for the up and down buttons in this example, I have extracted out the logic to set the badge number into its own function below our view. This function takes an integer, and won’t display any number that is less than or equal to zero.

//  ContentView.swift
import SwiftUI
import UserNotifications

struct ContentView: View {
    @State var badgeCount = 0
    let notificationCenter = UNUserNotificationCenter.current()
    
    var body: some View {
        VStack {
            Button("Request Notification Access") {
                Task {
                    do {
                        try await notificationCenter.requestAuthorization(options: [.alert, .badge, .sound])
                    } catch {
                        print("Request authorization error")
                    }
                }
            }
            .buttonStyle(.borderedProminent)
            .padding(.bottom)
            
            Text("Badge Count: \(badgeCount)")
            
            HStack {
                Button("Badge - 1") {
                    badgeCount -= 1
                    // use the line below if you are targeting iOS 16 or lower
//                    UIApplication.shared.applicationIconBadgeNumber = badgeCount
                    
                    // use for iOS 17 and above
                    setBadgeNumber(badgeCount)
                }
                
                Divider()
                    .frame(height: 16)
                
                Button("Badge + 1") {
                    badgeCount += 1
                    // use the line below if you are targeting iOS 16 or lower
//                    UIApplication.shared.applicationIconBadgeNumber = badgeCount
                    
                    // use for iOS 17 and above
                    setBadgeNumber(badgeCount)
                }
            }
        }
    }
    
    func setBadgeNumber(_ number: Int) {
        Task {
            do {
                try await notificationCenter.setBadgeCount(badgeCount)
            } catch {
                print("Error setting the badge count")
            }
        }
    }
}

#Preview {
    ContentView()
}

If you got value from this article, please consider following me, 👏 clapping for this article, or sharing it to help others more easily find it.

If you have any questions on the topic or know of another way to accomplish the same task, feel free to respond to the post or share it with a friend and get their opinion on it. If you want to learn more about native mobile development, you can check out the other articles I have written here: https://medium.com/@jpmtech. If you want to see apps that have been built with native mobile development, you can check out my apps here: https://jpmtech.io/apps. Thank you for taking the time to check out my work!