How to make SF Symbols in SwiftUI have the same width

I fixed this using PreferenceKey, also work well with dynamic font sizing.

Test in Xcode13.2 Swift5.5

struct ContentView: View {

    @State private var iconWidth: Double = 0

    private var icons: [String] = ["person.crop.circle", "tag", "text.book.closed", "icloud.and.arrow.up"]

    var body: some View {
        List(icons, id: \.self) { iconName in
            HStack {
                Image(systemName: iconName)
                    .sync(with: $iconWidth)
                    .frame(width: iconWidth)

                Text(iconName)
            }
            .onPreferenceChange(SymbolWidthPreferenceKey.self) { iconWidth = $0 }
        }
    }
}

struct SymbolWidthPreferenceKey: PreferenceKey {

    static var defaultValue: Double = 0

    static func reduce(value: inout Double, nextValue: () -> Double) {
        value = max(value, nextValue())
    }
}

struct SymbolWidthModifier: ViewModifier {

    @Binding var width: Double

    func body(content: Content) -> some View {
        content
            .background(GeometryReader { geo in
                Color
                    .clear
                    .preference(key: SymbolWidthPreferenceKey.self, value: geo.size.width)
            })
    }
}

extension Image {

    func sync(with width: Binding<Double>) -> some View {
         modifier(SymbolWidthModifier(width: width))
    }
}

You can set the scalable width/height with the @ScaledMetric property wrapper that is available since iOS 14 or macOS 11.

For example, define this view first:

struct ScaledFrame<Content>: View where Content: View {
    @ScaledMetric private var width: Double
    @ScaledMetric private var height: Double
    private var alignment: Alignment
    private var content: () -> Content
    
    init(
        width: ScaledMetric<Double>? = nil,
        height: ScaledMetric<Double>? = nil,
        alignment: Alignment = .center,
        content: @escaping () -> Content
    ) {
        _width = width ?? ScaledMetric(wrappedValue: -1)
        _height = height ?? ScaledMetric(wrappedValue: -1)
        self.alignment = alignment
        self.content = content
    }
    
    var body: some View {
        content().frame(
            width: width > 0 ? width : nil,
            height: height > 0 ? height : nil,
            alignment: alignment)
    }
}

// For convenience :)
extension View {
    func scaledFrame(
        width: Double?,
        height: Double?,
        relativeTo textStyle: Font.TextStyle,
        alignment: Alignment = .center
    ) -> some View {
        ScaledFrame(
            width: width.flatMap { ScaledMetric(wrappedValue: $0, relativeTo: textStyle) },
            height: height.flatMap { ScaledMetric(wrappedValue: $0, relativeTo: textStyle) }) {
                self
            }
    }
}

Then you can use it like this:

struct Previews_ScaledFrame_Previews: PreviewProvider {
    static var previews: some View {
        let size = 30.0
        let textStyle = Font.TextStyle.body
        let scaledSize = ScaledMetric(wrappedValue: size, relativeTo: textStyle)
        return VStack(alignment: .leading, spacing: 0) {
            HStack {
                // Use it directly like this
                ScaledFrame(width: scaledSize, height: scaledSize) {
                    Image(systemName: "folder")
                }
                Text("Hello")
            }

            HStack {
                // Or use it via the method like this
                Image(systemName: "mappin")
                    .scaledFrame(
                        width: size,
                        height: size,
                        relativeTo: textStyle)
                Text("World")
            }
        }
    }
}

These are how it looks like when using the Dynamic Type:

xSmall

Large

AX5

A workaround for the issue. However, the problem is that it does not work well with dynamic font sizing.

HStack {
    Image(systemName: "square.and.arrow.up")
        .font(Font.system(size: 18, weight: .medium, design: .monospaced))
        .foregroundColor(Color("secondary"))
}
.frame(minWidth: 30)