DEV Community

Thomas Prezioso Jr.
Thomas Prezioso Jr.

Posted on

1

How to Use SF Symbols in a SwiftUI project

SF Symbols are set of over 2,000 symbols created by Apple for developers to use in there apps. SF Symbols are dynamic. This means that they will automatically align with the size and weight of text in our app. We can use these symbols for almost anything but they are most commonly used in toolbars, menus, and navigation bars.

We can use SF Symbols in our project by using the Image(systemName:) image view. In the system name parameter we will add the string of the SF Symbol we want to use.

Image(systemName: “cloud.sun.fill”)

As you can see in the example above we added the “cloud.sun.fill” SF Symbol to our image view.

We can also customize SF Symbols. If we want to change something like the color of our SF Symbol all we need to do is change the .foregroundColor(). We can also change the size of our symbol by changing the .font size.

Image(systemName: "cloud.heavyrain.fill")
.foregroundColor(.green)
.font(.title)

That was a quick look at how we can add SF Symbols to our SwiftUI projects. For more info checkout Apples Human Interface Guidelines on how you should use SF Symbols in our projects.

Thanks for reading and Happy Coding!

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay