# Avatar

The **Avatar** component is used to display a single image, usually a profile picture or similar. It can also be used to display other images, but the [**Image** ](#image)component is recommended for this functionality. If more than one Avatar needs to be displayed in a group, you can use the [**Avatar Group**](https://docs.appfarm.io/library/ui-components/avatar-group) component.

{% hint style="info" %}
A full example setup of the **Avatar** is available in our [Showroom](https://showroom.appfarm.app/ui-components/image). You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register on [Showroom Signup](https://showroom.appfarm.app/sign-up).
{% endhint %}

## Settings

### Avatar Image

This is where you connect the Image to your Data. 

Examples of what the Image UI Component may be connected to: 

* A Resource File uploaded to Appfarm Create named `background.png`
* An object from the File Object Class `Task Photos`, connected to the property `File Content` (which is in fact a URL)
* A property `Company Logo` of type Image URL, found on the Object Class `Company`.

### Icon

The icon that will show if the Avatar Image is empty, or obtains no results. This can be bound to an Enum through the **Icon Value** setting.

### Letters

These can also be used if the image has no value. This will display a pair of letters instead of the icon. For instance, a user's initials could be shown if they do not have a profile picture.

### Tooltip

Here you can configure text which appears when the user hovers over the **Avatar** component.

### Badge

A potential use for the **Avatar** component is to combine it with a Badge. This badge can be used to display a numerical or String value to the user. For example, in an app that has in-built notifications, an **Avatar** component can be configured with a Badge to display the number of new notifications that the current user has. 

{% hint style="info" %}
The Badge is automatically hidden if the output is 0 or an empty string.
{% endhint %}

### Conditional Properties

The Icon property can be overwritten based on a specified condition. Icons are only visible when the Avatar's image cannot be found, or is empty.

### Event Handlers

An Avatar component can be linked to the On Click event handler, which will trigger an action when the component is clicked on by the user. For example, clicking on a user's avatar could open a dialog or a popup which contains more information about that user.