JSFiddle - React, Tailwind, and code Playground

by Tiro

HTML

<svg>
    <path d="M 0,54 v18 q10,0 20,0 t20,0 v-18 q-10,0 -20,0 t-20,0 Z" class="mod"></path>
    <circle cx="33" cy="54" r="7" class="shevron"></circle>

    <path d="M 0,90 v0 q10,0 20,9 t20,9 v-18 q-10,0 -20,0 t-20,0 Z" class="new"></path>
    <circle cx="33" cy="90" r="7" class="shevron"></circle>
    text
</svg>

CSS

svg {
    fill: lightblue;
    stroke: gray;
    stroke-width: 1px;
}
svg.old {
    fill: pink;
}
svg.new {
    fill: lime;
}

svg .shevron {
    fill: white;
    cy: 15px;
}
svg .shevron::before {
    content: 'x';
    font-size: 18px;
    background-color: blue;
}

circle::before {
    content: 'x';
    font-size: 18px;
}