JSFiddle - React, Tailwind, and code Playground

by IceCreamYou

HTML

<svg width="21" height="21"
    xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
    role="img" aria-label="Pin">
    <g>
        <path fill="none" class="svg-stroke-action" d="
            M 19.5 7.5
            L 13.5 1.5
            A 8 8 15 0 0 13.5 6
            L 8 11
            A 8 8 15 0 0 2 10.5
            L 10.5 19
            A 8 8 15 0 0 10 13
            L 15 7.5
            A 8 8 15 0 0 19.5 7.5
            M 6 15
            L 1.5 19.5"
            stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" />
    </g>
</svg>

CSS

.svg-fill-action {
    fill: #A00893;
}

.svg-stroke-action {
    stroke: #A00893;
}

svg {
  border: 1px solid #AAA;
  display: block;
  margin: 5px;
  zoom: 1;
}