<!-- Circle -->
<svg viewBox="0 0 100 100" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" fill="orange" />
</svg>

<!-- Square -->
<svg viewBox="0 0 100 100" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" fill="orange" />
</svg>

<!-- Right Triangle -->
<svg viewBox="0 0 100 100" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 100,100 0,100" fill="orange" />
</svg>

<!-- Equilateral Triangle -->
<svg viewBox="0 0 100 100" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="50,20 100,100 0,100" fill="orange" />
</svg>

<!-- Hexagon -->
<svg viewBox="0 0 100 100" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="25,0 75,0 100,50 75,100 25,100 0,50" fill="orange" />
</svg>

<!-- - Pentagon -->
<svg viewBox="0 0 100 100" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="50,0 100,40 80,100 20,100 0,40" fill="orange" />
</svg>

<!-- Star -->
<svg viewBox="0 0 100 100" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="50,5 20,99 95,39 5,39 80,99" fill="orange" />
</svg>

<!-- Checkmark -->
<svg viewBox="0 0 100 100" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="88.8,22.2 33.5,77.5 11.4,55.5 0.2,66.7 22.2,88.8 33.5,100 44.7,88.8 100,33.4" fill="orange" />
</svg>

<!-- Plus -->
<svg viewBox="0 0 100 100" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="40,0 60,0 60,40 100,40 100,60 60,60 60,100 40,100 40,60 0,60 0,40 40,40" fill="orange" />
</svg>

<!-- Arrow-->
<svg viewBox="0 0 100 100" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,40 70,40 70,20 100,50 70,80 70,60 0,60" fill="orange" />
</svg>




html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
Rerun