<li class="menu">
  <ul>
    <li class="button">
      <a href="#" class="box1">
        <img src="https://revda.autotc.ru/images/galochka/ok.png" class="img1" alt="img1">
        <img src="https://img.icons8.com/small/2x/internet.png" class="img2" alt="img2">
        Главная
      </a>
    </li>
  </ul>
</li>

.box1:not(.state2) .img2 { display: none; }
.box1.state2 .img1 { display: none; }

const buttons = document.querySelectorAll('.button');
[...buttons].forEach(button => {
  const box1 = button.querySelector('.box1');
  box1.addEventListener('click', e=>{
    e.preventDefault();
    box1.classList.toggle('state2');
  });
});