# Message Avatar View

## Injecting Custom Avatar View

The default avatar shown for the message sender in the SDK is a rounded image with the user's photo. You can change the look and feel of this component, as well as introduce additional elements.

To do this, you need to implement `makeUserAvatarView` in the `ViewFactory` and return your custom view. Here's an example on how to create a custom avatar with a rounded rectangle clip shape.

```swift
import StreamChat
import SwiftUI

struct CustomUserAvatar: View {
    var user: ChatUser
    var size: CGFloat

    public var body: some View {
        ZStack {
            if let url = user.imageURL {
                AsyncImage(url: url) { image in
                    image.resizable().scaledToFill()
                } placeholder: {
                    Image(systemName: "person.circle")
                        .resizable()
                }
                .clipShape(RoundedRectangle(cornerRadius: 8))
                .frame(width: size, height: size)
            } else {
                Image(systemName: "person.circle")
                    .resizable()
                    .frame(width: size, height: size)
            }
        }
    }
}
```

After the view is created, you need to provide it in your custom factory, and afterwards inject the factory in the view hierarchy.

```swift
class CustomFactory: ViewFactory {

    @Injected(\.chatClient) public var chatClient

    public var styles = RegularStyles()

    private init() {}

    public static let shared = CustomFactory()

    func makeUserAvatarView(options: UserAvatarViewOptions) -> some View {
        CustomUserAvatar(
            user: options.user,
            size: options.size
        )
    }
}
```

The `UserAvatarViewOptions` provides the following properties:

- `user` – the `ChatUser` whose avatar will be displayed. You can access `user.imageURL`, `user.name`, `user.id`, and other properties.
- `size` – the `CGFloat` for the avatar dimension.
- `showsIndicator` – whether the online presence indicator is shown on the avatar.
- `showsBorder` – whether a border should be shown around the avatar.

With this, you can have a custom avatar view across the SDK's UI components that have the avatar slot. You can also use the name and the user id from the `ChatUser`, in case you want to present additional information in the avatar view.


---

This page was last updated at 2026-07-10T16:05:04.310Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/ios/swiftui/message-components/custom-avatar/](https://getstream.io/chat/docs/sdk/ios/swiftui/message-components/custom-avatar/).