SwiftUI Label tutorial – how to create and use Label in SwiftUI

Label is a user interface item in SwiftUI which enables you to display a combination of an image (icon, SF Symbol or other) and a text label in a single UI element. This tutorial shows you how to create and use a Label in SwiftUI.

In it’s simplest form, a Label with SF Symbol and text can be created like this:

Label("SwiftUI Tutorials", systemImage: "book.fill")

The result should look like this:

SwiftUI Label with SF Symbol and text
SwiftUI Label with SF Symbol and text

Display a label with title only

Use  the labelStyle() modifier to apply a title only style:

Label("SwiftUI Tutorials", systemImage: "book.fill")
    .labelStyle(TitleOnlyLabelStyle())

Display a label with image only

Use the labelStyle() modifier to apply an image only style:

Label("SwiftUI Tutorials", systemImage: "book.fill")
    .labelStyle(IconOnlyLabelStyle())

Use your own image  in a label

First, make sure to add an image to your Xcode project.

Then, use the image name directly in label’s initializer like this:

Label("SwiftUI Tutorials", systemImage: "my-custom-image")

Change the size of a label

You can change the size of the entire label by applying the font() modifier to it by using a pre-existing type property:

Label("SwiftUI Tutorials", systemImage: "book.fill")
    .font(.largeTitle)

Or pass a desired font size like this:

Label("SwiftUI Tutorials", systemImage: "book.fill")
    .font(.system(size: 56.0))

Create SwiftUI labels using custom views

A label can also be created using custom title and image closures for more flexibility and control over its appearance. 

For example, a label can be created using a custom text view having red color and an image view being blue:

Label {
    Text("SwiftUI")
        .foregroundColor(Color.red)
} icon: {
    Image(systemName: "keyboard")
        .foregroundColor(Color.blue)
}

The result should look like this:

SwiftUI Label with custom text and image colors
SwiftUI Label with custom text and image colors

Use a shape in place of label’s image

Using the above initialization method, a SwiftUI shape can be used in place of label’s image. In this example we’re going to use a Capsule shape:

Label {
    Text("SwiftUI")
} icon: {
    Capsule().frame(width: 22, height: 44)
}

It should look like this:

SwiftUI Label with shape in place of image
SwiftUI Label with shape in place of image

Fully customize SwiftUI labels

In order to fully customize a label or to create brand new label styles, you’ll need to implement the LabelStyle protocol.

Create new MyCustomLabelStyle struct adopting the LabelStyle protocol which needs to implement the required makeBody() method. A code template for this looks like this:

struct MyCustomLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {

        // Your custom code here

    }
}

The above code is just a starting point so let’s explore how this can be applied in multiple examples.

Add a background color to a label

Create new YellowBackgroundLabelStyle which adds some padding around the label and makes its background color yellow:

struct YellowBackgroundLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        Label(configuration)
            .padding()
            .background(Color.yellow)
    }
}

Now, apply this new style to your label:

Label("SwiftUI Tutorials", systemImage: "book.fill")
    .labelStyle(YellowBackgroundLabelStyle())

And the result should look like this:

SwiftUI Label with custom style
SwiftUI Label with custom style

Create a vertical SwiftUI label

Finally, let’s explore how to re-arrange the elements of the label to make it stack them up vertically. For that purpose, we’re going to implement the view that represents the body of a label as a VStack. You can access individual elements of the label (e.g., icon and title) through the configuration properties of the label and put them inside of the VStack:

struct VerticalLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack {
            configuration.icon
            configuration.title
        }
    }
}

Label("SwiftUI Tutorials", systemImage: "book.fill")
    .labelStyle(VerticalLabelStyle())
Vertical SwiftUI Label
Vertical SwiftUI Label

Related tutorials:

Take a look at Apple’s official documentation of Label.