Interactive tool

Streamlit header designer

Design beautiful st.markdown() headers with icons, subtitles, badges, dividers, and background styles. Copy the Python code directly into your Streamlit app.

Presets
Content
Header Text
Subtext (optional)
Badge (optional)
Badge Color
Heading Style
Level
Header Color
Letter Spacing-0.02em
Icon
Position
analytics
Click to change
Subtext Style
Distance from Header6px
Font Size0.9rem
Weight
Color
Background & Divider
Background
Divider
Divider Gap16px
localhost:8501
analytics
Dashboard OverviewLive
Real-time operational metrics and performance insights
All Presets Preview
analytics
Performance DashboardLive
Real-time metrics and KPIs across all departments
security
Risk Overview
Q4 2025 operational risk assessment summary
trending_up
Revenue Metrics+12%
Monthly recurring revenue trends
flag
Key Findings3 items
Critical items requiring immediate attention
auto_awesome
Operational Excellence
Transforming risk management through intelligent automation and data-driven decision making
settings
Settings

Customise your header → Copy the Python code → Paste into your Streamlit app

Frequently asked questions

How do I create a custom header in Streamlit?expand_more

Use st.markdown() with unsafe_allow_html=True and pass an HTML string. Style the heading with inline CSS for font size, weight, colour, and letter spacing. This designer lets you build the header visually and exports the complete Python code ready to paste.

Can I add an icon next to a heading in Streamlit?expand_more

Yes. Load Material Icons via st.markdown('<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">', unsafe_allow_html=True) once at the top of your app, then use <span class="material-icons">icon_name</span> in your HTML. This designer handles the import and lets you pick from 70+ curated icons.

How do I add a divider below a heading in Streamlit?expand_more

Pass an <hr> element with inline styles inside st.markdown(). Options include solid, dashed, dotted, gradient, and thick styles. This designer lets you choose the divider style and gap interactively.

How do I style a section header differently from st.header() in Streamlit?expand_more

st.header() gives limited control over colour, font weight, and spacing. By using st.markdown() with custom HTML and inline styles, you gain full control. This designer provides presets like Dashboard Title, Section Header, Left Accent, and Card Header to get started quickly.

More tools

palette
Theme generatorGenerate colour palettes, shade ramps, and alert colours with config export for Streamlit, Plotly, Matplotlib, and Altair.Open tool →
grid_view
Badge designerDesign badge grids with Material Icons, colour presets, and dark mode — copy the generated Python code into your Streamlit app.Open tool →