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

Profile Avatar Circle

Clean circular avatar with customizable image clipping and shadow.

SwiftUI Implementation

Pure Vanilla Swift • No Dependencies
profileAvatarCircle.swift
import SwiftUI

struct ProfileAvatarCircle: View {
    let image: Image
    let size: CGFloat
    let borderColor: Color
    let borderWidth: CGFloat
    
    var body: some View {
        image
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: size, height: size)
            .clipShape(Circle())
            .overlay(
                Circle().stroke(borderColor, lineWidth: borderWidth)
            )
            .shadow(color: .gray.opacity(0.5), radius: 5, x: 0, y: 2)
    }
}

// Get the "person" image here: https://drive.google.com/file/d/1GNK7FnEQ2WWtclCdUEo77IRez6jIIK7z/view?usp=sharing

#Preview {
    ProfileAvatarCircle(
        image: Image("person"), // Replace with your image name
        size: 100,
        borderColor: .white,
        borderWidth: 4
    )
}

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

Recommended Use Cases

  • App settings, preferences, and account configuration screens
  • Dashboard overviews, stats tracking, and metric highlights

Component Details

iOS Compatibility
iOS 16.0+
Xcode Version
Xcode 15+
Platform
iOS
License Tier
Free
Themes & Contexts
settingsdashboardaccount
Keywords
avatarprofileimage
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