How to give label icons a fixed width
Updated for Xcode 16.4
New in iOS 26
SwiftUI's Label view shows an icon and text side by side, but if the icons are varying widths then the position of your text will vary and it looks a little scruffy.
We can fix this using the labelReservedIconWidth() modifier, which reserves a fixed amount of space for the icon in your label, allowing you to align them neatly:
VStack {
Button("Example", systemImage: "plus") { }
Button("Example", systemImage: "envelope.front") { }
}
.font(.largeTitle)
.labelReservedIconWidth(50)
Download this as an Xcode project
That ensures each icon takes up a constant 50 points of width, which in turn means that the label titles will be aligned correctly.
Important: This modifier does not currently adapt to Dynamic Type automatically, so hard coding a specific number isn't going to scale well.
I hope this gets addressed by Apple before release so that the modifier does the right thing automatically, but in the meantime we need to use @ScaledMetric like this:
struct ContentView: View {
@ScaledMetric private var iconWidth = 50.0
var body: some View {
VStack {
Button("Example", systemImage: "plus") { }
Button("Example", systemImage: "envelope.front") { }
}
.font(.largeTitle)
.labelReservedIconWidth(iconWidth)
}
} Download this as an Xcode project
SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's all new, fully customizable Paywall Editor allow you to remotely change your paywall view without any code changes or app updates.
Similar solutions…
- How to make two views the same width or height
- How to customize a view’s width in NavigationSplitView
- How to make a fixed size Spacer
- How to position views in a fixed grid
- How to show text and an icon side by side using Label
