Quick Presets
Grid Settings
Per Row
Size
Gap
12
Preview
Badges (4)
localhost:8501
Approved
3 items
Pending
12 items
Failed
1 item
Score: 94
Design badges → Copy Python code → Paste into your Streamlit app
Design badge grids with Material Icons, colour presets, and dark mode preview. Copy the generated Python code directly into your Streamlit app.
Design badges → Copy Python code → Paste into your Streamlit app
Use st.markdown() with the unsafe_allow_html=True parameter. Pass an HTML string containing styled <div> elements for your badges. This designer generates the full HTML and wraps it in a st.markdown() call you can copy directly into your app.
Yes. Add the Material Icons CSS via st.markdown() at the top of your app: st.markdown('<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">', unsafe_allow_html=True). Then use <span class="material-icons">icon_name</span> inside your HTML. This designer handles the import automatically.
Use a grid of styled HTML badges inside st.markdown(). Define a CSS grid with display:grid and grid-template-columns, then place metric cards with icons, labels, and sublabels. This designer lets you build that layout visually and exports the Python code.
st.markdown() renders whatever HTML you give it, so dark mode styling is entirely in your hands. Set dark background colours and light text colours in your inline styles. This designer has a dark mode toggle that adjusts the preview and all generated code automatically.
More tools