Search code examples
iosswiftswiftui

How to make SF Symbols in SwiftUI have the same width

Is there a way to make all symbols in the same size have the same width?

As you can see from the screenshot below, person.2.fill has the longest width and square.and.arrow.up is the nearest. Setting the font to a mono-spaced font does not seem to change anything in this case.

Image(systemName: "square.and.arrow.up")
    .font(Font.system(size: 18, weight: .medium, design: .monospaced))

A workaround would be not "forcing" them to have the same width but horizontally centered inside the same width container.

enter image description here

Solution

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

    enter image description here