Show text and icon side by side using SwiftUI Label

In this tutorial, you are going to learn how to show a text with an icon side by side using the SwiftUI Label.

Label is a dedicated view type in SwiftUI that can help us to show text and an icon or text and an image side by side. We can use this feature in menus, lists and for many other purposes.

It is possible to use either SF Symbols or your own image for Label. For SF icons, we will provide value to systemImage, for our own image, we will use image.

In the example below, we have used the SF Symbols:

Label("Send message", systemImage: "paperplane")

It will generate a Label text that will look like in the screenshot below:

To use your own image as the label icon, make sure the image is in your Xcode project Assets folder. You can drag your image and drop it into the Assets directory.

Now we will do the same thing with our own image. Below is the given image that we are going to use:

Below is how we can use our own image with Label view:

Label("Upload", image: "upload-image-small")

Maybe the image is larger or in a different size. In that case, you want to provide a size for the label image. With a little bit more code, we can use Text view to show our label text and in the Image view inside the icon, we will provide the size. Below is how we can do it:

        Label {
            Text("Upload")
        } icon: {
            Image("upload-image-small")
                .resizable()
                .frame(width: 48, height: 48)
        }

By Faruque Ahamed Mollick