Placing SF Symbols next to the SwiftUI Text

Previously I have discussed how to use SF Symbols in SwiftUI. Now in this tutorial, you are going to learn how to place SF Symbols next to the Text in SwiftUI.

Using SF symbol with Text

SF symbols can work nicely inside the text in SwiftUI. Below is given a simple example of using the circled xmark icon xmark.circle next to the text:

Text("Verify your email \(Image(systemName: "xmark.circle"))")

The above piece of code will show something like this:

Below is another example where we have the SF icon somewhere in the text:

Text("This is document \(Image(systemName: "doc")) icon")

In the example below, we are using two icons:

Text("I am happy \(Image(systemName: "face.smiling")), but yesterday I was sad \(Image(systemName: "die.face.1"))")

You can add multiple SF symbol icons as you want just like you can see above placing two SF symbols.

Using SF Symbol with Label text

Below is an example of using SF symbol image with a Label:

Label("Reminder: Verify your email", systemImage: "xmark")

And below is how it looks like for the above code in our view:

As you can see, we have provided the image in a separate parameter systemImage and not inside the text string.

Below is given another example:

Label("Account created successfully", systemImage: "checkmark.circle.fill")

By Faruque Ahamed Mollick