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:
- Un contenedor.
- El
<input />
donde insertarás el ícono. - 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.

<input />
con la propiedad CSS top
.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.
El valor a poner dentro de translateY
es igual al valor de top
pero en negativo.
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 />
.

<input />
alineado correctamente.También escribí un snippet para mostrar y ocultar contraseñas al hacer click en el ícono del ojo.
Deja un comentario