Introduction
When SwiftUI was announced in 2019, Apple released SF Symbols. It was a much-anticipated introduction because Apple has always been fond of making sure the iOS apps align with iconography.
Introducing a suite of symbols provided by Apple means that it’s easier to make your iOS applications feel like they belong on the Apple platform.
Each year, Apple keeps adding more icons, and now SF Symbols has over 3,300!
In this article, you will explore the SF Symbols macOS application to find your best icon for the situation and render an SF Symbol within an Image on SwiftUI.
Using SF Symbols Mac App
Apple always likes to make our lives easier, and instead of searching through a website list of icons, they have built an SF Symbols mac application.
![](https://usercontent.one/wp/www.swiftlyrush.com/wp-content/uploads/2022/04/Screenshot-2022-04-11-at-14.07.03.png?media=1637150467)
You can download the application by clicking here.
With access to all the different symbols, you can also customize colour and icon size right inside the mac application to ensure it’s suited for your use case.
Rendering an SF Symbol in SwiftUI
struct TransactionsView: View {
var body: some View {
Image(systemName: "bitcoinsign.circle")
}
}
As we are continuing our journey to building the SwiftlyRush Bank, it would make sense to stick with the currency format, and in your above example, we’re displaying a Bitcoin icon.
struct TransactionsView: View {
var body: some View {
Image(systemName: "bitcoinsign.circle")
.font(.largeTitle)
}
}
In theory, you’re displaying the icon using the SF font, which means you can set the font type modifier to this Image object.
![](https://usercontent.one/wp/www.swiftlyrush.com/wp-content/uploads/2022/04/Screenshot-2022-04-11-at-14.11.57.png?media=1637150467)
You can also go ahead and change the colour of this icon
struct TransactionsView: View {
var body: some View {
Image(systemName: "bitcoinsign.circle")
.font(.largeTitle)
.foregroundColor(.yellow)
}
}
![](https://usercontent.one/wp/www.swiftlyrush.com/wp-content/uploads/2022/04/Screenshot-2022-04-11-at-14.13.09.png?media=1637150467)
The Yellow makes more sense here for the Bitcoin.
What Next?
It’s also possible to make the icon use multiple different colours, and you can explore the renderingMode()
modifier to achieve this.
I am curious what else you can find when exploring SF Symbols :]