Skip to content

🐱  App logo

Submitted by Zachary Blackwood

Summary

Add a logo on top of the navigation bar of a multipage app

Functions

Add a logo (from logo_url) on the top of the navigation page of a multipage app. Taken from the Streamlit forum The url can either be a url to the image, or a local path to the image.

Parameters:

Name Type Description Default
logo_url str

URL/local path of the logo

 required
Source code in src/streamlit_extras/app_logo/__init__.py 
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@extra
def add_logo(logo_url: str, height: int = 120):
    """Add a logo (from logo_url) on the top of the navigation page of a multipage app.
    Taken from [the Streamlit forum](https://discuss.streamlit.io/t/put-logo-and-title-above-on-top-of-page-navigation-in-sidebar-of-multipage-app/28213/6)
    The url can either be a url to the image, or a local path to the image.

    Args:
        logo_url (str): URL/local path of the logo
    """

    if validators.url(logo_url) is True:
        logo = f"url({logo_url})"
    else:
        logo = f"url(data:image/png;base64,{base64.b64encode(Path(logo_url).read_bytes()).decode()})"

    st.markdown(
        f"""
        <style>
            [data-testid="stSidebarNav"] {{
                background-image: {logo};
                background-repeat: no-repeat;
                padding-top: {height - 40}px;
                background-position: 20px 20px;
            }}
        </style>
        """,
        unsafe_allow_html=True,
    )

Import:

from streamlit_extras.app_logo import add_logo # (1)!
  1. You should add this to the top of your .py file 🛠

Examples

example

def example():
    if st.checkbox("Use url", value=True):
        add_logo("http://placekitten.com/120/120")
    else:
        add_logo("gallery/kitty.jpeg", height=300)
    st.write("👈 Check out the cat in the nav-bar!")
Output (beta)