AX - Avatar

AX - Avatar is an Experience Cloud component that displays profile pictures, initials, or icons on Experience Sites pages to represent users, contacts, accounts, or any Salesforce record.

Use it to show portal user profiles, account representatives, contact lists, or entity identifiers with consistent visual styling. The component automatically displays images when available or falls back to initials or icons.

Perfect for user profile headers, community member lists, contact directories, or anywhere portal users need visual identification of people or entities.

The Avonni Avatar component helps you create visually consistent representations of users or entities within your Salesforce Experience Cloud site. Here's a step-by-step guide to personalize the Avatar to fit your needs:

The Avatar component offers flexibility in how you display initials:

If you know the initials you want to display, enter them directly into the "Initials" field.

To make your Avonni components dynamic, you can use Experience Cloud Expressions. For example, in the Avatar component below, you can use the following expression to display the currently logged-in user's name automatically:

You can replace Name with the actual field name storing the user's name in your Salesforce org.

If you'd like to automatically generate initials from a full name, enable the "Initials Auto Formatted" option. This will use Experience Cloud expressions to extract and format the first letter of each word in the name.

Add a profile photo, logo, or any image to make the Avatar instantly recognizable. Upload your image using the Selected Content option—the component automatically crops and formats it to fit within the Avatar shape.

If no image is added, the Avatar displays initials instead

Choose between circle or square using the Variant field to match your portal's design. Circular avatars work well for people, while square shapes suit logos or entity icons

Control how large the Avatar appears on the page using the Size property. Options range from x-small to xx-large, so you can balance it with surrounding content—smaller for inline lists, larger for profile headers.

Display additional context alongside the Avatar by adding text fields. Use Primary Text for the most important information (like a full name) and Secondary Text for supporting details (like job title or email).

You can also set font styles for each text level to create visual hierarchy between the primary and secondary information.

Add visual labels to categorize or highlight information about the Avatar. Tags appear as small badges and can be styled with different colors using the Tag Variant option—useful for showing status, department, role, or any quick identifier.

Initials displays specific initials for a user or entity, and Initials Auto Formatted auto-generates them from a provided full name for a consistent representation without manual input.

Fallback Icon Name sets the backup icon shown when primary data (an image or initials) is absent, ensuring visual continuity.

CMS Image and Image URL or Expression set the avatar's image — reference a CMS-managed asset or provide a URL/expression. Href turns the avatar into a link to the given address.

Variant chooses a circular (circle) or square (square) shape, and Size adjusts the overall dimensions (x-small to xx-large). Icon Position aligns the fallback icon within the avatar (start, center, end).

Primary Text, Secondary Text, and Tertiary Text display the main, supplementary, and third-level text alongside the avatar (often a name, then a role, then an extra detail); their text styles (Heading 1–4 or Paragraph 1–2) are set on the Style tab. Text Position specifies the alignment of those texts relative to the avatar (left, center, right).

Hide Avatar Details shows or conceals the additional details associated with the avatar, such as texts or tags.

Tags add badge tags to the avatar as categorical markers or indicators.

Entity Icon Name, Entity Initials, Entity Image Source, Entity Variant, and Entity Position configure a secondary "entity" badge overlaid on the avatar — its icon, initials, image, shape (circle/square), and corner position.

Actions add action buttons to the avatar, and Link To defines an interaction triggered when the avatar is clicked.

User Profiles – Create complete profile headers by combining a custom image with primary text for the user's name and secondary text for their job title or department. This gives portal users a clear, professional representation on their profile pages.

Community Forums – Display Avatars next to posts and comments so community members can quickly identify who's contributing. This adds a personal touch that encourages engagement and makes conversations easier to follow.

Team Pages – Showcase team members with Avatars that include names, roles, and tags for department or expertise. This helps portal users find the right contact and understand team structure at a glance.