Анимация иконок в поле ввода информации

Делаю страницу регистрации пользователя. Надо сделать так, чтобы при нажатии на одну из полей ввода, появлялась левая стоящая иконка там же(в поле ввода). Но если пользователь ещё не нажал на это поле ввода, иконка не должна показываться.Это как страница выглядит сейчас:

Всё желательно сделать на CSS,на JS тоже можно.

Пока код выглядит вот так(HTML):

<div className="input-form">
                    <input
                    type="text" value={name} className="has-icon-user" onChange={(e) => setName(e.target.value)}
                    placeholder="Name, Surname" />
                </div>
                <div className="input-form">
                    <input
                    type="email" value={email} className="has-icon-email" onChange={(e) => setEmail(e.target.value)}
                    placeholder="E-mail" />
                </div>
                <div className="input-form">

                    <input type="password" value={password} className="has-icon-password" onChange={(e) => setPassword(e.target.value)} placeholder="Password"/>
                </div>


                <button onClick={login} type="submit">Register</button>
                <p onClick={alreadyHaveProfile}>I have a profile</p>

На CSS выглядит вот так:

  >.input-form>input{
    width: 100%;
    height: 50px;
    min-width: 250px;
    margin-bottom: 20px;
    padding: 0 10px;
    outline: none;
    color: var(--fg-input);
    background-color: var(--bg-input);
    border-radius: 4px;
    font-family: 'Kalam', cursive;
    font-size:14px;
    font-weight:bold;
    transition:border 250ms ease-in-out;
    
    ::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    :focus,:active {
      background-color: #E8E8E8;
      border:2px solid #ADADAD;
      outline: none;
    }
  }
  >.input-form>input:invalid {
    border: 2px dashed red;
  }
  >.input-form>input[type=number],
  input[type=text],
  input[type=email],
  input[type=password] {
    -moz-appearance: textfield;
    padding-left:55px; 
  }
  >.input-form>.has-icon-user{
    background-image:url("images/user.svg") ;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    background-position: 5px;
  }
  >.input-form>.has-icon-email{
    background-image:url("images/email.svg") ;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-position: 5px;
  } 
  >.input-form>.has-icon-password{
    background-image:url("images/lock.svg") ;
    background-repeat: no-repeat;
    background-position: 5px;
    background-size: 40px 40px;
  }

Надеюсь на ваш ответ!