Autumn Sale50% offCOMPOT
Avatars & User ProfilesPro ComponentiOS 16.0+Xcode 15+

Contact Avatar 62x62

Contact avatar with initials badge and status indicator.

SwiftUI Implementation

Pure Vanilla Swift • No Dependencies
contactAvatar62.swift
// Place image named "person" into Assets in your XCode project
VStack(alignment: .center, spacing: 4) {
    Image("person")
        .resizable()
        .scaledToFill()
        .frame(width: 62, height: 62)
        .clipped()
        .clipShape(Circle())
        .overlay {
            RoundedRectangle(cornerRadius: 4)
                .frame(width: 20, height: 20)
                .foregroundStyle(.green.gradient)
                .overlay {
                    Image(systemName: "message.fill")
                        .resizable()
                        .foregroundStyle(.white)
                        .frame(width: 12, height: 12)
                }
                .offset(x: 22, y: 22)

        }
    Text("Josh Maryway")
        .foregroundStyle(.primary)
        .font(.system(size: 11, weight: .regular))
        .multilineTextAlignment(.center)
        .frame(maxWidth: 76)
}

Ready to copy and paste directly into any Xcode project running iOS 16.0+.

Recommended Use Cases

  • First-run onboarding flows and feature introductions
  • App settings, preferences, and account configuration screens

Component Details

iOS Compatibility
iOS 16.0+
Xcode Version
Xcode 15+
Platform
iOS
License Tier
Pro
Themes & Contexts
settingsonboardingaccount
C

Compot for iOS

Native SwiftUI playground app

Preview all 130+ components interactively on your device and copy code straight to Xcode with 1 tap.

Get Compot on the App Store