Ícono dentro de un input usando HTML y CSS

Si estás aquí es porque necesitas insertar un ícono dentro de un <input /> de HTML en tu aplicación o sitio web. Y la pregunta aquí es: ¿por qué necesitarías un ícono?

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

• Para un <input /> de buscador, es común agregar un ícono de lupa que denota la acción de buscar.
• Para un <input /> de contraseña, se agrega un ícono de un ojo abierto y cerrado para mostrar y esconder la contraseña escrita por el usuario.

En los siguientes demos te muestro cómo insertar un ícono dentro de un <input /> usando solo HTML y CSS, Bootstrap y Tailwind CSS.

Ícono dentro de un input usando HTML y CSS

Tenemos dos <input />, un buscador y un campo de contraseña con sus respectivos íconos usando solo HTML y CSS.

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

Ícono dentro de un input usando Bootstrap

Tenemos dos <input />, un buscador y un campo de contraseña con sus respectivos íconos usando Bootstrap.

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

Cabe destacar que para posicionar el left y right del ícono dentro del <input /> tuvimos que usar CSS personalizado, ya que Bootstrap no permite usar valores pequeños como los que requerimos.

Ícono dentro de un input usando Tailwind CSS

Tenemos dos <input />, un buscador y un campo de contraseña con sus respectivos íconos usando Tailwind CSS.

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

Explicación

Para poner un ícono dentro del <input />, es necesario tener tres cosas:

1. Un contenedor.
2. El <input /> donde insertarás el ícono.
3. El ícono (en mis ejemplos uso en formato SVG).

Al juntar los elementos anteriores, el HTML se ve así:

<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 posición 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, ni más ni menos.

Ahora, lo más importante del <input /> es que tenga una posición absoluta para que el ícono tenga libertad de movimiento dentro del input.

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

De ahí en fuera, podrás asignarle al ícono cualquier tipo de propiedad CSS como color, tamaño, etc.

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

La propiedad top con su valor 50% define el comportamiento de la posición de arriba de nuestro ícono.

En nuestro caso, como tenemos un top: 50%, quiere decir que vamos a empujar un 50% el ícono de arriba hacia abajo.

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 cambie sus coordenadas. Entonces cuando decimos que el valor sea translateY(-50%) indica que moverá el elemento en su 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 dentro del <input />.