How to Create A Custom Avatar in SwiftUI

To create a custom avatar in SwiftUI, you can use an Image view and apply a cornerRadius() modifier to give it a circular shape. You can also use a ZStack to overlay a border or shadow on top of the image.

Here is an example of how you could create a custom avatar view:

struct AvatarView: View {
    let image: Image
    let size: CGFloat

    var body: some View {
        image
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: size, height: size)
            .cornerRadius(size / 2)
            .overlay(
                Circle()
                    .stroke(Color.white, lineWidth: 4)
                    .frame(width: size, height: size)
            )
            .shadow(radius: 10)
    }
}

You can then use the AvatarView like this:

struct ContentView: View {
    var body: some View {
        VStack {
            AvatarView(image: Image(systemName: "figure.walk.circle.fill"), size: 200)
        }
        .padding()
    }
}

You can customize the appearance of the avatar by modifying the image, size, border, shadow, and other parameters of the view.

If you want to load an image in an avatar asynchronously you can take a look at the following articles Async Custom Avatar in SwiftUI using AsyncImage

✍️ Written by Ishtiak Ahmed

👉 Follow me on X ● LinkedIn

---

Get Ready to Shine: Mastering the iOS Interview

• Ace iOS Coding Interview
• Uplift iOS Interview - A Comprehensive Guide to iOS Interview

---

Enjoying the articles? Get the inside scoop by subscribing to my newsletter.

Get access to exclusive iOS development tips, tricks, and insights when you subscribe to my newsletter. You'll also receive links to new articles, app development ideas, and an interview preparation mini book.