How it works
A label is a view that pairs a title with an icon, presenting them together as a single, consistently aligned unit. Reach for Label whenever an item needs both a glyph and descriptive text — menu rows, list entries, buttons, and toolbar items — instead of hand-assembling an Image and Text in an HStack. Because Label understands the semantic relationship between its title and icon, the surrounding context can adapt the presentation, showing both parts, just the icon, or just the text without rewriting the call site.
Create a label with a title and SF Symbol
The
init(_:systemImage:)initializer builds a label from a title string and the name of a system symbol, which is the most common way to construct one. HereLabel("Battery Full", systemImage: "battery.100")pairs the text with thebattery.100glyph, andLabel("Account", systemImage: "person.circle")does the same withperson.circle.Choose what to show with labelStyle(_:)
The
labelStyle(_:)modifier controls which parts of the label appear, letting one declaration render as title-and-icon, icon-only, or title-only depending on context. Applying.labelStyle(.iconOnly)to the"Favorites"label hides its text and draws only thestar.fillicon — useful in compact spaces where the meaning is already clear.Tint the title and icon together
Because a label is an ordinary view, color modifiers cascade to both of its parts at once.
.foregroundColor(.blue)on the"Wi-Fi"label and.foregroundColor(.yellow)on the"Favorites"label recolor the text and symbol as a single styled element.Adjust typography with font(_:)
Standard text modifiers flow through the label's title and scale its icon to match, so the pair stays visually balanced.
.font(.headline)on the"Account"label promotes it to headline weight and sizing while keepingperson.circleproportionate.
.labelStyle(.iconOnly) on the "Favorites" label to .labelStyle(.titleOnly) to see the star disappear and only its text remain.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct LabelDemo: View {
var body: some View {
VStack(alignment: .leading, spacing: 16) {
Label("Battery Full", systemImage: "battery.100")
Label("Wi-Fi", systemImage: "wifi")
.foregroundColor(.blue)
Label("Favorites", systemImage: "star.fill")
.labelStyle(.iconOnly)
.foregroundColor(.yellow)
Label("Account", systemImage: "person.circle")
.font(.headline)
}
.padding()
}
}