JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" class="svg-index">
      <svg xmlns="http://www.w3.org/2000/svg" id="SVG-dropdown-icon" viewBox="0 0 15 11">
          <title>
              Expand
          </title>
          <path d="M1.758 1L7.5 6.582 13.242 1 15 2.709 7.5 10 0 2.709z"/>
      </svg>

      <svg id="SVG-active-icon" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
          <title>
              Current Event
          </title>
          <g fill="none" fill-rule="evenodd">
              <circle class="activeEventPulse" stroke="currentColor" fill="#EBEBED" cx="12.5" cy="12.5" r="11.5"/>
              <ellipse fill="currentColor" cx="12.5" cy="12.5" rx="4.5" ry="4.5"/>
          </g>
      </svg>

</svg>

<svg class="dropDown">
    <use xlink:href="#SVG-dropdown-icon" />
</svg>

<svg class="active">
    <use xlink:href="#SVG-active-icon" />
</svg>

<svg class="active">
    <use xlink:href="#SVG-active-icon" />
</svg>

<svg class="dropDown">
    <use xlink:href="#SVG-dropdown-icon" />
</svg>

CSS

.svg-index {
  display: none;
}