Custom icons inside a .tabItem in SwiftUI

Question

I'm trying to use my custom icons inside all my .tabItem elements without any success!

I first tried using a Label but the icon is way too big.

.tabItem {

    // Label("Home", systemImage: "house.fill")
    Label("Home", image: "home-icon")

}

Then, I tried using the combination of an Image and a Text but the result is the same: the icon is bigger than expected.

.tabItem {

    Image("home-icon")
        .resizable()
        .frame(width: 28, height: 28)

    Text("Home")
        .font(.system(size: 15, weight: .medium, design: .rounded))
        .foregroundColor(Color("blue"))
        // Test: unfortunately, the font isn't .rounded either!

}

Do you guys have an idea about this?

Answer 1

You missing add method scale for image.

 .tabItem {

    Image("home-icon")
        .resizable()
        .scaleToFit()
        .frame(width: 28, height: 28)

    Text("Home")
        .font(.system(size: 15, weight: .medium, design: .rounded))
        .foregroundColor(Color("blue"))
        // Test: unfortunately, the font isn't .rounded either!

}