<form class='search' action='https://www.google.com/search' method='get' target='_blank'>
  <input class='search-bar' type='search' name='q'>
  <button class='search-btn' type='button'>
    <ion-icon class='search-icon search-glass' name="search-outline"></ion-icon>
    <ion-icon class='search-icon search-close' name="close-outline"></ion-icon>
  </button>
</form> 

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.search {
  position: relative;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  transition: width 0.5s;
}

.active { width: 400px; }

.search-bar {
  position: absolute;
  width: inherit;
  height: inherit;
  border: 0.125rem solid black;
  border-radius: 2rem;
  outline: none;
  font: 1rem helvetica,sans-serif;
  letter-spacing: 0.05rem;
  padding-left: 2rem;
}

::-webkit-search-cancel-button {
  position: absolute;
  right: 4.5rem;
  filter: grayscale(100%) invert(20%);
  font-size: 0.9rem;
  cursor: pointer;
}

.search-btn {
  position: absolute;
  right: 0.5rem;
  width: 3rem;
  height: 3rem;
  border: none;
  background-color: black;
  border: 0.1rem solid black;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.search-icon {
  position: absolute;
  color: white;
  font-size: 1.5rem;
}

.search-glass {
  opacity: 1;
  transition: opacity 0.5s, transform 0.5s;
}

.active .search-glass {
  opacity: 0;
  transform: rotate(360deg);
}

.search-close {
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
}

.active .search-close {
  opacity: 1;
  transform: rotate(360deg);
}

const search = document.querySelector('.search');
const bar = document.querySelector('.search-bar');
const btn = document.querySelector('.search-btn');

function activate() {
  search.classList.toggle('active');
  bar.value = '';
  setTimeout(() => bar.focus(),750)
}

btn.addEventListener('click',activate,false);