SF Symbols resizing in SwiftUI to same size doesn't look correct

Question

I am displaying a row of various SF Symbols in my App and want to resize them to be buttons. However as SF Symbols don't start out at the same size, when I resize them all up to 44x44 some appear too large. I could size them differently depending on what they are, however I actually don't know what these symbols will be ahead of time, just that they will be similarly grouped ie. a bunch of shapes, a bunch of arrows etc

Does anyone have any suggestions on how to resize these properly without some of them looking way to large. For example the in the image below the arrow in the middle looks way too large to me.

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.black
            VStack {
                HStack {
                    Image(systemName: "arrow.left")
                        .font(.title)
                        .foregroundColor(.white)
                        .border(Color.white.opacity(0.3))
                    
                    Image(systemName: "arrow.up.right")
                        .font(.title)
                        .foregroundColor(.white)
                        .border(Color.white.opacity(0.3))

                    Image(systemName: "arrow.down")
                        .font(.title)
                        .foregroundColor(.white)
                        .border(Color.white.opacity(0.3))
                }
                
                HStack {
                    Image(systemName: "arrow.left")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 44.0, height: 44.0)
                        .font(.headline)
                        .foregroundColor(.white)
                        .border(Color.white.opacity(0.3))
                    
                    Image(systemName: "arrow.up.right")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 44.0, height: 44.0)
                        .font(.headline)
                        .foregroundColor(.white)
                        .border(Color.white.opacity(0.3))

                    Image(systemName: "arrow.down")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 44.0, height: 44.0)
                        .font(.headline)
                        .foregroundColor(.white)
                        .border(Color.white.opacity(0.3))
                }
            }
            .padding()
        }
    }
}

PlaygroundPage.current.setLiveView(ContentView())

score 4 · Accepted Answer · answered Sep 19 '20 at 04:48

When use fill content mode they look the same, so possibly this can be appropriate (just tune frame size to required).

Tested with Xcode 12 / iOS 14.

HStack {
    Image(systemName: "arrow.left")
        .resizable()
        .aspectRatio(contentMode: .fill)      // << here !!
        .frame(width: 44.0, height: 44.0)
        .font(.headline)
        .foregroundColor(.white)
        .border(Color.white.opacity(0.3))

    Image(systemName: "arrow.up.right")
        .resizable()
        .aspectRatio(contentMode: .fill)      // << here !!
        .frame(width: 44.0, height: 44.0)
        .font(.headline)
        .foregroundColor(.white)
        .border(Color.white.opacity(0.3))

    Image(systemName: "arrow.down")
        .resizable()
        .aspectRatio(contentMode: .fill)      // << here !!
        .frame(width: 44.0, height: 44.0)
        .font(.headline)
        .foregroundColor(.white)
        .border(Color.white.opacity(0.3))
}

That works extremely well for the arrows, I didn't try that as it didn't seem logical. It doesn't work well for some of the other examples I have where the grouped icons contain shapes that are not roughly the same size. I think I will just have to stick to similarly shaped objects for each group and use your solution. As always thank you @Asperi I appreciate the help you give me and everyone else on StackOverflow. — Brett, Sep 19 '20 at 07:54
Just a FYI, what I mean doesn't work well is the images "people", "people.2", and "people.3". But to be honest in the App I am doing, they don't look that great together anyway. — Brett, Sep 19 '20 at 07:56

SF Symbols resizing in SwiftUI to same size doesn't look correct

1 Answers1

Linked