{"id":10270,"library":"streamlit-avatar","title":"Streamlit Avatar","description":"streamlit-avatar is a Streamlit component designed to easily display avatar icons within Streamlit applications. It supports showing avatars from image URLs or displaying text/initials. The current version is 0.1.3, and it generally follows the Streamlit component release cycle, with updates as needed for compatibility or new features.","status":"active","version":"0.1.3","language":"en","source_language":"en","source_url":"https://github.com/ppspps824/streamlit_avatar","tags":["streamlit","avatar","ui-component","frontend"],"install":[{"cmd":"pip install streamlit-avatar","lang":"bash","label":"Install stable version"}],"dependencies":[{"reason":"Required to run Streamlit applications and components.","package":"streamlit","optional":false}],"imports":[{"note":"The `st_avatar` function is part of the `streamlit_avatar` library, not directly from the core `streamlit` library.","wrong":"from streamlit import st_avatar","symbol":"st_avatar","correct":"from streamlit_avatar import st_avatar"}],"quickstart":{"code":"import streamlit as st\nfrom streamlit_avatar import st_avatar\n\nst.set_page_config(layout=\"wide\")\n\nst.title(\"Streamlit Avatar Example\")\n\n# Example 1: Image avatar from a URL\nst.header(\"1. Image Avatar\")\nst.markdown(\"Displays an image from a URL. Click to open GitHub.\")\nst_avatar(\n    url=\"https://avatars.githubusercontent.com/u/84214537?v=4\",\n    size=80,\n    border_radius=50,\n    border_color=\"#007BFF\",\n    border_hover_color=\"#0056B3\",\n    open_url_on_click=\"https://github.com/ppspps824\"\n)\n\n# Example 2: Text avatar (initials)\nst.header(\"2. Text Avatar (Initials)\")\nst.markdown(\"Displays text (e.g., initials) by setting `is_image=False`.\")\nst_avatar(\n    url=\"SA\", # The text to display\n    size=60,\n    is_image=False,\n    title_font_size=24,\n    title_color=\"#FFF\",\n    border_radius=10,\n    border_color=\"#28A745\",\n    border_hover_color=\"#218838\"\n)\n\nst.write(\"---\")\nst.write(\"Avatars demonstrated above.\")","lang":"python","description":"This example demonstrates how to display both an image-based avatar from a URL and a text-based avatar (e.g., initials) using the `streamlit_avatar` component. It showcases setting size, border styles, and click actions."},"warnings":[{"fix":"For text avatars (e.g., initials), set `is_image=False` and pass the desired text (e.g., 'JD') directly to the `url` parameter, rather than a URL that generates an image from text.","message":"The `is_image` parameter dictates whether the `url` content is treated as an image source or raw text. If `is_image=False`, the value of `url` is displayed as text directly, not interpreted as a URL to fetch a text-generated image.","severity":"gotcha","affected_versions":"0.1.0+"},{"fix":"Always use `streamlit run <your_script_name>.py` from your terminal to execute Streamlit applications that use this component.","message":"Like all Streamlit components, `streamlit-avatar` must be run within a Streamlit application using `streamlit run your_app.py`. It will not render correctly if executed as a standard Python script.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Utilize the provided parameters for styling. For highly custom styles, explore Streamlit's `st.markdown(unsafe_allow_html=True)` with caution to target specific HTML elements rendered by the component, or consider contributing to the component's styling options.","message":"Only specific styling parameters are exposed (size, border_radius, colors, font sizes). Custom CSS beyond these parameters is not directly supported by the component and may require using Streamlit's `st.markdown(unsafe_allow_html=True)` to inject broader styling rules, which can be more complex.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-17T00:00:00.000Z","next_check":"2026-07-16T00:00:00.000Z","problems":[{"fix":"Run `pip install streamlit-avatar` in your terminal to install the library.","cause":"The `streamlit-avatar` library is not installed in your current Python environment.","error":"ModuleNotFoundError: No module named 'streamlit_avatar'"},{"fix":"Change your import statement to `from streamlit_avatar import st_avatar`.","cause":"You are attempting to import `st_avatar` directly from the `streamlit` module instead of its dedicated library.","error":"AttributeError: module 'streamlit' has no attribute 'st_avatar'"},{"fix":"Verify that the `url` provided is a valid, publicly accessible image URL. If using a local image, ensure it is served correctly by Streamlit or converted to a data URI. Double-check all parameters for correct types and values (e.g., `size` should be an int, colors valid strings).","cause":"This generic error often indicates an issue with the parameters passed to `st_avatar`, such as an invalid `url` (e.g., a non-accessible image URL or a local file path not served by Streamlit), or potentially incorrect type/value for other styling parameters.","error":"Component Exception: Failed to render component streamlit_avatar.streamlit_avatar"}]}