you can do something like this

const switchIcon = (container,newHtml, timeout) => {
  
  setTimeout(() => {
    container.innerHTML = ''
    setTimeout(() => {
      container.innerHTML = newHtml
    }, 1000)
  }, timeout)
  
}


switchIcon(document.getElementById('icon-container'), '<span> icon 2</span>', 3000)

<div id="icon-container">
<span>icon 1</span>
</div>

On top of your css insert

    @keyframes icon1 {
      0%   {opacity: 1; z-index: 1000;} 
   /* Change opacity as you like 1= visible 0=not visible, you can also add other % like 20% 10% to make it happen faster and add any css property*/
      50%  {opacity: 0.5;}
      100% {opacity: 0; z-index: -1;}
    }
    @keyframes icon2 {
      0%   {opacity: 0; z-index: -1;} /* Change opacity as you like 1= visible 0=not visible */
      50%  {opacity: 0.5;}
      100% {opacity: 1; z-index: 1000;}
    }
    /*If you need it clickable just add z-index or insead of z-index add visibility: hidden when opacity is 0 and visibility: visible to opacity 1*/
    
    then add this to your first icon's css
    animation-name: icon1;
    animation-duration: 4s; //change seconds
    animation-iteration-count: infinite;

    
    and this to your second icon's css
    animation-name: icon2;
    animation-duration: 4s; /* Change seconds */
    animation-iteration-count: infinite;

I didn't make it work as you would but you can just change value between them. you can use absolute position to make them stand on top of each other, remember that position absolute needs top or bottom: (any px you want) px; and left or right: (any px you want) px;. Also set parent to relative.

You can also add transition property to make it smooth, always on icon's css example