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.