The Avatar block shows a circular profile image with a text fallback. When the image cannot be loaded, the block shows initials extracted from the fallback text instead.

<img
  src="https://res.cloudinary.com/zimple/image/upload/c_crop,w_1024,h_130,x_0,y_0/f_auto,q_auto/v1777456276/interface-docs/avatar-render.png"
  alt="Three Avatar blocks side by side: a Medium avatar showing a profile photo from an Image URL, a Medium fallback avatar with the initials 'JD' for 'John Doe', and a slightly larger Large fallback avatar with the initials 'AB' for 'Anna Bell'."
  width="1024"
  height="130"
  loading="lazy"
/>

## Settings

| Setting | Description |
|---|---|
| **Image URL** | The URL of the image to display. Supports the Data Picker. |
| **Fallback Name** | Text shown when the image cannot load. Initials come from the first two words -- for example `John Doe` becomes `JD`. A single-word value uses just the first letter. An empty value renders as `?`. Supports the Data Picker. |
| **Size** | Pick **Small (32px)**, **Medium (40px)** (default), or **Large (56px)**. |

## Style and Visibility

The Avatar block uses the standard **Style** sub-tab (background, borders, radius) and **Visibility** sub-tab in Block Settings, the same as every other block. See [Block Styles](/docs/buttons/interface-button/interface-builder/reference/styles/block-styles) and [Conditional Visibility](/docs/buttons/interface-button/interface-builder/how-to/visibility/conditional-visibility).