TechnologiesSwiftUI

IconOnlyLabelStyle struct

iOSmacOStvOSwatchOSvisionOSiOS 14.0+✓ renders

A label style that only displays the icon of the label.

How it works

IconOnlyLabelStyle is a label style that tells SwiftUI to display only the icon of a Label, hiding its title text. Because a Label normally pairs an image with descriptive text, this style is what you reach for in space-constrained or visually compact contexts — toolbars, tab bars, or dense grids — where the glyph alone communicates the action and a caption would only add clutter. You apply it through the labelStyle(_:) modifier, and the title you supply still travels with the view, so accessibility technologies can read it even though it isn't drawn on screen.

  1. Build a Label with a title and icon

    The style operates on a Label, which packages a text title and a symbol image. Even when only the icon will render, you still provide both — as in Label("Favorites", systemImage: "star.fill") and Label("Profile", systemImage: "person.crop.circle") — so the hidden title remains available to VoiceOver and other assistive features.

  2. Apply the style with labelStyle(IconOnlyLabelStyle())

    Pass an instance of the style to the labelStyle(_:) modifier to switch the label into icon-only presentation. Calling .labelStyle(IconOnlyLabelStyle()) on the first label drops its "Favorites" text and leaves just the star.fill glyph visible.

  3. Prefer the .iconOnly shorthand

    SwiftUI exposes the same style as the static member .iconOnly, which reads more naturally in a modifier chain and avoids constructing the struct by hand. The second label uses .labelStyle(.iconOnly), which is equivalent to passing IconOnlyLabelStyle() and is the idiomatic form.

  4. Let the surviving icon inherit appearance modifiers

    Because the title is removed but the icon remains a normal view, ordinary modifiers continue to shape what's drawn. .foregroundColor(.yellow) tints the remaining star, and .font(.largeTitle) and .font(.title) size each glyph, so the icon scales and colors just as the text-bearing label would have.

Try it — Change .labelStyle(.iconOnly) on the second label to .labelStyle(.titleOnly) to see the "Profile" text appear and the person.crop.circle icon vanish, confirming that IconOnlyLabelStyle is purely a presentation choice over the same underlying Label.

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.

IconOnlyLabelStyle.swift
struct IconOnlyLabelStyleDemo: View {
    var body: some View {
        VStack(spacing: 16) {
            Label("Favorites", systemImage: "star.fill")
                .labelStyle(IconOnlyLabelStyle())
                .foregroundColor(.yellow)
                .font(.largeTitle)
            Label("Profile", systemImage: "person.crop.circle")
                .labelStyle(.iconOnly)
                .font(.title)
        }
        .padding()
    }
}
Live preview
Favorites
Favorites
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →