Embedded Link Icons — Quick and Easy Streamlit Application

We will cover two applications of having embedded link icons on your Streamlit app. Whether you are creating a personal website or deploying your latest Data Science project, these icons are a nice touch to help polish your app’s appearance.

Unfortunately, Streamlit currently doesn’t have a built-in function (st.icon would be a great addition) for us to accomplish this. We will be using a LinkedIn icon as our example — just follow the below quick and easy steps.

Step 1 : Procure Logo/Icon URL

LinkedIn provides their brand logos/icons for download and use here.

We will be using the smaller square icon in our example. To start, all you have to do is : right click on the icon → Copy image address

This should be the URL you get.

Step 2 : Sidebar application

We will use Streamlit’s built-in sidebar and markdown features.
st.sidebar enables you to target your app’s sidebar
st.markdown enables you to display string formatted as Markdown

The markdown format to display an icon with an embedded link is as follows :
“[](<Website URL>)"

Combining st.sidebar with st.markdown, we get the below :

st.sidebar.markdown(“[](‘www.linkedin.com/in/brian-f-rubin’)”)

All you have to do is replace my LinkedIn address with your own if you decide to use this icon.

Step 3 : Incorporating Columns

st.columns allows you to create multiple columns on your page. We can populate them by displaying icons side by side.

Let’s say you want to include two icons alongside each other — one for your LinkedIn and another for your GitHub profile.

Create two columns using the below syntax:
column1, column2 = st.columns(2)

Next, we will use the same code from Step 2 to populate these columns :

column1.markdown(“[](<Website URL>)”)
column2.markdown(“[](<Website URL>)”)

There are many different websites offering free URLs for icons and logos we can use.
Here is an example of a small GitHub icon produced on Icon8.com.

_______________________________________________________________

That wraps it up. You can follow the above steps for any other logos/icons you may want to incorporate in your app.

Example use case can be seen on this Streamlit app.

Please follow all of LinkedIn’s guidelines outlined in their branding policies and GitHub’s usage terms when using their logos.

Sources : Streamlit discussion forum