Metric: replace arrow with circle


Iโ€™m trying to replace the upper and lower arrows in the Metric component by changing the CSS directly and adding a circle instead. Unfortunately, the code does not work.

Steps to reproduce

Code snippet:

replace_metric_arrow: str = """
    [data-testid="stMetricDelta"] svg {
        display: <circle cx="50" cy="50" r="50" />;

# remove the arrow in the metrics and use a circle instead
st.write(replace_metric_arrow ,unsafe_allow_html=True)

Itโ€™s hacky, butโ€ฆ

import streamlit as st

st.metric(label='My Metric', value=10000, delta=10)

css = '''
    [data-testid="stMetricDelta"] svg {
        display: none;
    [data-testid="stMetricDelta"] > div::before {
        font-weight: bold;

st.markdown(css, unsafe_allow_html=True)


And hereโ€™s a different post about centering if thatโ€™s desirable, too.

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.