Add image and text both on a button in SwiftUI

In this tutorial, I will show you how to add image and text at the same time on a button in SwiftUI.

It’s easy for us to add text label to SwiftUI button. Here, you will learn how to place an image beside text on a button label.

Add image from assets on SwiftUI button Label along with text

Yes, in this first example, I am showing you how to add an image from Assets as a Button label with text.

import SwiftUI

struct ContentView: View {

    var body: some View {
        Button {
            // add your button action here
        } label: {
            Label("Any Text", image: "image_name_here")
        }
        
    }
}

If you run this, it will add a Button with label Any Text and on the left side of that text the image will be shown.

For example, I have taken this website’s fav icon as an image in our SwiftUI project Assests. Check this output:

You are free to add styling with this button as you do normally like adding background color, foreground color, padding, corner radius etc.

Button {
    // add your button action here
} label: {
    Label("Any Text", image: "image_name")
}
.background(Color.mint)
    .foregroundColor(.white)
    .cornerRadius(5)

In this case, SwiftUI will automatically change or recolor your image to match the button color.

But if you still wish to keep the exact original color of the image you can add this below modifier

.renderingMode(.original)

Add SF symbols with Button label text

If you want to add built-in Symbols or icons in your button label with text then you can use

Label("Buy me!", systemImage: "car")

Instead of using image: just use systemImage:

Here is the full code:

import SwiftUI

struct ContentView: View {

    var body: some View {
        Button {
            // add your button action here
        } label: {
            Label("Buy me!", systemImage: "car")
        }
        .border(.green) // just to add a border, you can customize your button as you wish
        
    }
}

Output:

If you are curious to learn more about SF symbol customization, I recommend you to read these:

Customization of SF symbols in SwiftUI and Set the size of SF Symbols in SwiftUI.

Using HStack to use images and text on the Button Label

I love the above two approaches but there is a crucial limitation. We can’t place the image after the text. The image will always appear just to the left of the text.

If you wish you can take a look at Custom space between Hstack elements in SwiftUI

In order to overcome this, we can use HStack for the image and text.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        Button(action: {
            // Add your button action here
        }) {
            HStack {
                Image("fav")
                Text("Press")
                Image(systemName: "car")
            }
        }
    }
}

fav is my image name which is located in the project Assests.

To make it look like a button you can customize it like this:

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        Button(action: {
            // Add your button action here
        }) {
            HStack {
                Image("fav")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 20, height: 20) // Adjust the size as needed
                Text("Press")
                    .font(.headline)
                    .foregroundColor(.white) // Text color
                Image(systemName: "car")
                    .font(.system(size: 20)) // Adjust the size as needed
            }
        }
        .padding() // Add some padding
        .background(Color.blue) // Background color
        .cornerRadius(8) // Add rounded corners
        .foregroundColor(.white) // Button text color
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Output: