`st.avatar` to show a standalone avatar image

[lukasmasuch]

Checklist

• I have searched the existing issues for similar feature requests.
• I added a descriptive title and summary to this issue.

Summary

Provide a standalone st.avatar element to show a visual representation of users or things. This should support images (anything supported by `st.image), emojis, material icons, or short text and display it on a background.

Why?

This is a common UI component in many UI frameworks. The recent introduction of flex container makes it feasible to integrate this into many Streamlit apps.

How?

st.avatar(image: image-like, shape: "circle" | "square" | None, size: "small" | "medium" | "large")

Renders the avatar image with an appropriate background (similar to st.chat_message(avatar)). image should support anything supported by `st.image, emojis, material icons, or short text (e.g. initials).

This could be extended with on_click support and the ability to define the background color.

Additional Context

• Avatar on Components Gallery
• Avatar on Tailwind

[github-actions]

To help Streamlit prioritize this feature, react with a 👍 (thumbs up emoji) to the initial post.

Your vote helps us identify which enhancements matter most to our users.

[jrieke]

This would be great for building something like this:

API-wise, I would leave out shape for now (and just always make it a circle), and also allow integers for size.

[lukasmasuch]

Maybe we can add an optional title: str and caption: str keyword as well, so that it is not needed to combine this with st.markdown and flex layout?

[zachikeh123]

Hi, my name is Zinachidi and I'm a junior at CMU taking a SWE course. My team has been tasked with contributing to an open source project and I would like to take on this issue.

[lukasmasuch]

I believe we still need a spec and design for this feature.