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

Profile Picture with PhotoPicker

Interactive avatar with PhotosUI PhotosPicker integration for instant photo changes.

SwiftUI Implementation

Pure Vanilla Swift • No Dependencies
profilePictureWPhotoPicker.swift
import SwiftUI
import PhotosUI

struct ProfilePictureWPhotoPicker: View {
    
    @State private var profilePictureData: Data?
    @State private var profilePicture: UIImage?
    @State private var selectedPicture: PhotosPickerItem? = nil
    
    // You can download defaultProfilePicture here: https://drive.google.com/file/d/1KyjmMlI96dMYRuaAfIa9YIisjnq_rH_T/view?usp=sharing
    // Place defaultProfilePicture in your Assets
    
    let defaultProfilePicture = UIImage(imageLiteralResourceName: "defaultProfilePicture")
    
    var body: some View {
        PhotosPicker(
            selection: $selectedPicture,
            matching: .images,
            photoLibrary: .shared()
        ) {
            ZStack {
                if let pictureData = profilePictureData, let uiImage = UIImage(data: pictureData) {
                    Image(uiImage: uiImage)
                        .resizable()
                        .scaledToFill()
                        .frame(width: 88, height: 88)
                        .clipShape(.circle)
                        .shadow(color: .gray, radius: 4)
                } else {
                    Image(uiImage: defaultProfilePicture)
                        .resizable()
                        .scaledToFill()
                        .frame(width: 88, height: 88)
                        .clipShape(.circle)
                        .shadow(color: .gray, radius: 4)
                }
            }
            .overlay(alignment: .bottom) {
                Image(systemName: "pencil.circle.fill")
                    .symbolRenderingMode(.multicolor)
                    .font(.system(size: 24))
                    .foregroundStyle(.primary)
                    .offset(x: 30, y: 5)
            }
            .onChange(of: selectedPicture) { _, newItem in
                Task {
                    if let data = try? await newItem?.loadTransferable(type: Data.self) {
                        await MainActor.run {
                            profilePictureData = data
                        }
                    }
                }
            }
        }
    }
}

#Preview {
    ProfilePictureWPhotoPicker()
}

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
Keywords
photo picker
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