How to create toggle buttons with customized icon

Using Streamlit
1

I am looking for a way to create toggle (or check box) buttons with customized icon.

image
image828×69 19.2 KB

My use case involves situations where checkboxes or toggles, along with text, take up too much space. In contrast, buttons with icons can be arranged more compactly, saving space.

Since these buttons represent checkbox/toggles logic, they need to

  • have a on and a off state
  • change the state upon each click
  • present different icons for different state
2

It is possible to get something similar to this today, but it doesn’t look quite as nice as the example you gave:

import streamlit as st
from streamlit_extras.stateful_button import button


columns = st.columns(10)

icons = ["🍎", "🍌", "🍇", "🍓", "🍒", "🍑", "🥭", "🍍", "🥥", "🥝"]

selected_icons = []

for index, column in enumerate(columns):
    with column:
        if button(icons[index], key=f"button_{index}"):
            selected_icons.append(icons[index])

st.write("Selected icons:", selected_icons)

image
image1700×654 34.6 KB

The good news is, there is official support for this coming soon!

You can see it on the Roadmap: https://roadmap.streamlit.app/

And here is a sneak peek: x.com

1 Like
3

I added a feature request to GitHub for image parsing on buttons if you want to vote and comment there. As @blackary mentioned, there is an improvement coming for the “group of toggles” part of your question. This GitHub issue is for the “custom image” part of your question:

2 Likes