---
title: Avatar
description: Avatar API.
---

import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';

<CodeSnippetMD imagePath="" noScreenShot scale="3" imageWidth="300" imageHeight="200" imageAlt="">
```slint
import { Avatar } from "@material";
export component Example inherits Window {
    width: 100px;
    height: 100px;
    background: transparent;
    Avatar {
        image: @image-url("profile.jpg");
        x: 10px;
        y: 10px;
    }
}
```
</CodeSnippetMD>

An `Avatar` is a circular component that displays a user's profile picture or image.

## Properties

### background
<SlintProperty propName="background" typeName="color" defaultValue="MaterialPalette.primary">
The background color of the avatar.
</SlintProperty>

### image
<SlintProperty propName="image" typeName="image">
The image to display in the avatar.
</SlintProperty>