SwiftUI Labels

System icon labels, gradient bordered badges, custom text icon pills, and initials monograms. (4 components available in Compot).

Download in App Store

1 of 4Free ComponentiOS 16.0+

Label Basic with Icon

Standard Label component with system symbol and title.

View Component & Details

LabelBasicWithIcon.swift

import SwiftUI

struct LabelBasicWithIcon: View {
    var body: some View {
        Label("Library", systemImage: "books.vertical")
        .labelStyle(.titleAndIcon)
        .font(.title3)
        .padding()
        .background(.thinMaterial)
        .clipShape(.rect(cornerRadius: 8))
        .shadow(color: .gray.opacity(0.3), radius: 1)
    }
}

#Preview {
    LabelBasicWithIcon()
}

2 of 4Pro ComponentiOS 16.0+

Label Bordered Gradient

Label framed with a gradient border.

View Component & Details

LabelBorderedGradient.swiftPro

Unlock in App

import SwiftUI

Label("Featured", systemImage: "star")
    .labelStyle(GradientBorderedLabelStyle())
    .background(.background.secondary)

// Implement this custom style
struct GradientBorderedLabelStyle: LabelStyle {

        // ...
        // Complete source code available in Compot Pro on the App Store.

Compot Pro Component

Unlock full code & interactive preview

Interactive live preview and complete SwiftUI code available in the Compot App.

Get Compot on the App Store

Available for macOS & iOS • 85+ free components included

3 of 4Free ComponentiOS 16.0+

Label with Text Icon

Label pairing a text badge/tag with main description copy.

View Component & Details

LabelWithTextIcon.swift

import SwiftUI

struct LabelWithTextIcon: View {
    var body: some View {
        Label {
            Text("Rating")
            .foregroundStyle(.secondary)
        } icon: {
            Image(systemName: "star.fill")
            .foregroundStyle(.yellow)
        }
    }
}

#Preview {
    LabelWithTextIcon()
}

4 of 4Free ComponentiOS 16.0+

Label with Person Initials

Label featuring user initials monogram in place of an image.

View Component & Details

LabelWithPersonInitials.swift

import SwiftUI

struct UseLabelWPersonInitials: View {
    
    var body: some View {
        LabelWPersonInitials(personName: PersonNameComponents(givenName: "Josh", familyName: "Merryway"), personJob: "CEO")
    }
}

#Preview {
    UseLabelWPersonInitials()
}

struct LabelWPersonInitials: View {
    
    let personName: PersonNameComponents
    let personJob: String
    
    var body: some View {
        Label {
            Text(personName, format: .name(style: .medium))
                .font(.body)
                .fontWeight(.regular)
                .foregroundColor(.primary)
            Text(personJob)
                .font(.subheadline)
                .foregroundColor(.secondary)
        } icon: {
            Circle()
                .fill(.blue.gradient.opacity(0.5))
                .frame(width: 44, height: 44, alignment: .center)
                .overlay(Text(personName, format: .name(style: .abbreviated)))
        }
    }
}

#Preview {
    LabelWPersonInitials(personName: PersonNameComponents(givenName: "Josh", familyName: "Merryway"), personJob: "CEO")
}

SwiftUI Labels

Label Basic with Icon

Label Bordered Gradient

Unlock full code & interactive preview

Label with Text Icon

Label with Person Initials

Explore other SwiftUI categories