How to Make Users Input SF Symbols in Your SwiftUI Apps

Since I started using SwiftUI for my apps three years ago, I have found myself many times in the situation of wanting to give users the ability to select SF Symbols for their personal purposes.

This can happen on numerous occasions. For example you may develop an app for students where each school subject has a different icon. SF symbols could be useful for categorizing events in an hypothetical calendar app. Or again they could be used in a game to represent different tools or player abilities.

Let’s remember that over the years Apple has enormously expanded the SF Symbols library and now there are some for every eventuality.

The SF Symbols picker

A couple of years ago I got tired of this lack, so I decided to do what we programmers love to do when we need something that doesn’t exists. We make it on our own.

SF Symbols Picker for SwiftUI, the package that started my #ForSwiftUI package series, provides an easy-to-use SwiftUI view to let your users pick SF Symbols in your apps.

GitHub - alessiorubicini/SFSymbolsPickerForSwiftUI: A SwiftUI view for selecting SF symbols in your…

In practice, all you need to do is pass the view a binding to a string that represents the name of the selected symbol.

In the example below, the symbol selected by default is a filled star (star.fill). The user can access the selection view simply by opening the sheet.

@State private var icon = "star.fill"
@State private var isPresented = false

var body: some View {
    NavigationView {
        VStack {
            Button("Select a symbol") {
                isPresented.toggle()
            }

            Image(systemName: icon)

            .sheet(isPresented: $isPresented, content: {
                SymbolsPicker(selection: $icon)
            })

        }
    }
}

Given the large number of SF symbols available, the view also features a search bar allowing users to quickly get to the symbol they need.

Thanks to the help of Jeffrey Macko, who recently contributed to the repository (bless open source!), the package gets the SF Symbols programatically from the system. So the users can access the latest symbols added by Apple as soon as they update their devices.

Considering this is my first open source library, the package has seen some discrete success on GitHub and I’m very happy to see that it’s helping some developers out there.

I’m currently working on other projects as I explore the possibility of expanding the package to support different styles and the new animated icons introduced with SF Symbols 5!