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

2.3k Views Asked by At

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.

Original on top, resized on bottom

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())
1

There are 1 best solutions below

2
On BEST ANSWER

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.

demo

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))
}