Browse SF Symbols on Mac

iOS SF Symbols

Apple introduce SF Symbols this year in WWDC 2019, it is a set of over 1,500 consistent, highly configurable symbols you can use in your app.

You simply initialize it with UIImage init(systemName:) or new SwiftUI Image init(systemName:). You can also adjust it width and size to matched your font with some configuration like this.

VStack(spacing: 20) {
Image(systemName: "bag")
Image(systemName: "bag").font(.largeTitle)
Image(systemName: "bag").font(Font.system(.largeTitle).bold())
}
UIImage(systemName: "bag", withConfiguration: UIImage.SymbolConfiguration(textStyle: .largeTitle))

Example of symbols with configuration

This is really great, the only problem is I don't know the name of those 1,500 symbol 😦
Luckily Apple provide an app called SF Symbols app hidden in their Human Interface Guidelines page.

SF Symbols App Icon

This wonderful app let you search through those 1,500 icons with ease.

SF Symbols App Screenshot


← Home