.input-wrapper {
   position: relative;
   width: 271px; 
}
 
.input {
   box-sizing: border-box;
   color: #191919;
   padding: 15px 15px 15px 35px;
   width: 100%;
}
 
.input.password {
   padding: 15px 35px 15px 15px;
}
 
.input-icon {
   color: #191919;
   position: absolute;
   width: 20px;
   height: 20px;
   left: 12px;
   top: 50%;
   transform: translateY(-50%);
}
 
.input-icon.password {
   left: unset;
   right: 12px;
}

Demo

En el siguiente demo, incluyo dos <input />, el primero es un buscador y el otro es un campo para ingresar una contraseña.

See the Pen SVG icon inside HTML input by Roel Magdaleno (@roelmagdaleno) on CodePen.

Contexto

Tal vez necesitas insertar un ícono dentro de un <input /> de HTML cuando estás diseñando tu sitio web. ¿Por qué necesitarías un ícono?

Un ícono provee más contexto sobre la acción a ejecutar del usuario, por ejemplo, inputs de:

• Buscadores.
• Contraseñas.

Para un <input /> de buscador, es común agregar un ícono de lupa, que simule la acción de buscar.

Y para las contraseñas, se agrega un ícono de un ojo abierto y cerrado para mostrar y esconder la contraseña escrita en el <input />.

Explicación

Para tener un ícono dentro del <input />, es necesario tener un contenedor, el <input /> y el ícono:

<div class="input-wrapper">
   <input type="search" class="input" placeholder="Search" />
 
   <svg
      xmlns="http://www.w3.org/2000/svg"
      class="input-icon"
      viewBox="0 0 20 20"
      fill="currentColor"
   >
      <path
         fill-rule="evenodd"
         d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
         clip-rule="evenodd"
      />
   </svg>
</div>

La clase CSS .input-wrapper debe tener una position relativa:

.input-wrapper {
   position: relative;
   width: 271px;
}

La posición relativa nos ayuda a que nuestro ícono (input-icon) se acople, únicamente, a la anchura y altura de su padre (input-wrapper).

Entonces, a nuestro <input /> le puedes aplicar cualquier estilo CSS pero el ícono deberá tener una posición absoluta, entre otros estilos como color y tamaño:

.input-icon {
   color: #191919;
   position: absolute;
   width: 20px;
   height: 20px;
   left: 12px;
   top: 50%;
   transform: translateY(-50%);
}

¿Notas las propiedades top y transform? Estas son el truco para hacer que el ícono quede centrado en el <input />.

La propiedad top con su valor 50%. Este define la posición de arriba de nuestro ícono. En este caso, como su valor es 50%, el ícono se hará hacia “abajo”; digamos que su punto inicial es el borde de nuestro wrapper (el cual contiene una posición relativa).

Lo anterior no hará que el ícono se vaya directo a la mitad, en cambio, se moverá casi hasta abajo del elemento. Ahora, debe trabajar en conjunto con la propiedad transform.

La propiedad transform hará que el elemento sea modificado en sus coordenadas, y su valor translateY(-50%) indica que moverá el elemento en el eje Y en un 50% menos.

Es decir, de los 50% que moviste con la propiedad top, hay que mover su eje Y un -50%. Y así, el ícono queda centrado en el <input />.