SF Symbol Images Different Sizes

Question

I am using SF Symbols in an app and discovering that they all render at different sizes, which makes lists of elements hard to align. What is the best way to make sure SF Symbols display at the same size, so they all line up and other elements line up too. I am sure I could hard code the frame width and height, but then that would break dynamic types, which I would like to keep.

Here is some sample code I wrote to demonstrate this:

struct LayoutTest: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            HStack(alignment: .top) {
                Image(systemName: "figure.walk").background(Color.red)
                Text("Value 1").background(Color.red)
            }
            HStack(alignment: .top) {
                Image(systemName: "phone").background(Color.red)
                Text("Value 2").background(Color.red)
            }
            HStack(alignment: .top) {
                Image(systemName: "figure.step.training").background(Color.red)
                Text("Value 3").background(Color.red)
            }
        }.font(.title)
    }
}

Does this answer your question https://stackoverflow.com/a/61984317/12299030? — Asperi, Jun 10 '22 at 04:47

score 3 · Answer 1 · answered Jun 10 '22 at 08:51

You can hard code a width and height and have it adjust via dynamic type by using @ScaledMetric, which adjusts a value based on the dynamic type size:

struct LayoutTest: View {

    @ScaledMetric var width: CGFloat = 50

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            HStack(alignment: .center) {
                Image(systemName: "figure.walk").background(Color.red)
                    .frame(width: width, alignment: .center)
                Text("Value 1").background(Color.red)
            }
            HStack(alignment: .center) {
                Image(systemName: "phone").background(Color.red)
                    .frame(width: width, alignment: .center)
                Text("Value 2").background(Color.red)
            }
            HStack(alignment: .center) {
                Image(systemName: "figure.wave").background(Color.red)
                    .frame(width: width, alignment: .center)
                Text("Value 3").background(Color.red)
            }
        }.font(.title)
    }
}

Standard and XXXL sizes look like this:

SF Symbol Images Different Sizes

1 Answers1