SwiftUI Avatars & User Profiles
Circular avatars with status badges, overlapping team stacks, and PhotosPicker integration. (7 components available in Compot).
import SwiftUI
struct AvatarBasic62x62: View {
var body: some View {
Image("person")
.resizable()
.scaledToFill()
.frame(width: 62, height: 62)
// ...
// Complete source code available in Compot Pro on the App Store.Unlock full code & interactive preview
Interactive live preview and complete SwiftUI code available in the Compot App.
Available for macOS & iOS • 85+ free components included
Contact Avatar 62x62
Contact avatar with initials badge and status indicator.
import SwiftUI
struct ContactAvatar62x62: View {
var body: some View {
VStack(alignment: .center, spacing: 4) {
Image("person")
.resizable()
.scaledToFill()
// ...
// Complete source code available in Compot Pro on the App Store.Unlock full code & interactive preview
Interactive live preview and complete SwiftUI code available in the Compot App.
Available for macOS & iOS • 85+ free components included
Avatar Stack
Overlapping horizontal stack of user avatars with "+X more" counter for teams and social apps.
import SwiftUI
struct UseAvatarStack: View {
let userCount: Int = 21
var body: some View {
HStack(alignment: .center, spacing: 8) {
// ...
// Complete source code available in Compot Pro on the App Store.Unlock full code & interactive preview
Interactive live preview and complete SwiftUI code available in the Compot App.
Available for macOS & iOS • 85+ free components included
Profile Picture with PhotoPicker
Interactive avatar with PhotosUI PhotosPicker integration for instant photo changes.
import SwiftUI
import PhotosUI
struct ProfilePictureWPhotoPicker: View {
@State private var profilePictureData: Data?
@State private var profilePicture: UIImage?
@State private var selectedPicture: PhotosPickerItem? = nil
// ...
// Complete source code available in Compot Pro on the App Store.Unlock full code & interactive preview
Interactive live preview and complete SwiftUI code available in the Compot App.
Available for macOS & iOS • 85+ free components included
Profile Avatar Circle
Clean circular avatar with customizable image clipping and shadow.
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
)
}Profile Avatar Rounded Rectangle
Modern squircle/rounded-rect avatar for contemporary dashboard designs.
import SwiftUI
struct ModernProfileAvatar: View {
let image: Image
let size: CGFloat
let cornerRadius: CGFloat
let borderColor: Color
let borderWidth: CGFloat
var body: some View {
image
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: size, height: size)
.clipShape(RoundedRectangle(cornerRadius: cornerRadius))
.overlay(
RoundedRectangle(cornerRadius: cornerRadius).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 {
ModernProfileAvatar(
image: Image("person"), // Replace with your image name
size: 100,
cornerRadius: 20,
borderColor: .primary,
borderWidth: 4
)
}More SwiftUI Avatars & User Profiles Components (1)
Browse additional avatars & user profiles components from our library. Click through to view standalone source code and usage examples.