Al interactuar con nuestras páginas web favoritas, hay un elemento que sin duda marca la diferencia en términos de usabilidad: la capacidad de identificar rápidamente un enlace, un botón o una lista de puntos clave.
Hablamos de los íconos, esos pequeños elementos gráficos que nos proporcionan contexto visual sobre funcionalidades específicas, como un cuadro de búsqueda o un enlace para iniciar sesión.
En este artículo nos centraremos en cómo añadir un ícono en HTML de manera simple y efectiva.
Tabla de contenidos
¿Qué es un icono en una página web?
Podemos definir a un icono como un elemento visual que representa gráficamente una acción, objeto o concepto en el contenido de determinada página web.
Los iconos son pequeños gráficos que ayudan a complementar el diseño y la funcionalidad de una página, haciendo que sea más fácil para los usuarios interactuar con ella y comprender su contenido.
Hay diferentes tipos de iconos que podemos encontrar en sitios web:
Iconos vectoriales (SVG): se trata de gráficos basados en vectores que se pueden ser redimensionados sin perder calidad y personalizados por medio de estilos CSS.
Iconos basados en fuentes: son un conjunto de iconos condensados en llamadas “bibliotecas” las cuales pueden ser invocadas en la página web para luego ser integradas por medio de estilos CSS, entre los más populares podemos mencionar a Font Awesome y Material Icons.
Iconos como imágenes: si bien se suele utilizar imágenes en formato SVG, también es válido implementar iconos por medio de otros formatos de imagen, como PNG o Webp.
Existe un sin fin de casos en los que podemos encontrar iconos y puede que al normalizarlos puedan pasar desapercibidos, por ejemplo:
- El icono de la lupa en las barras de búsqueda.
- El icono del sobre para correo electrónico.
- La hamburguesa (3 rayas) para un menú desplegable.
- Las estrellas para dar valoraciones.
- El corazón para guardar en favoritos o lista de deseos.
- El carrito de compra en páginas de e-commerce.
¿Para qué se usan los iconos en HTML?
Los iconos en el contenido de nuestro sitio en HTML son empleados para mejorar de forma sencilla la experiencia y la interfaz de usuario al proporcionar representaciones visuales que complementan o en algunos casos reemplazan parte del texto.
Si bien sus propósitos pueden ser variados, usar iconos trae consigo una serie de aspectos destacados.
Facilitar la comprensión: los iconos al ser elementos gráficos pueden comunicar rápidamente una acción, estado o categoría, como una lupa para búsqueda o un teléfono para un número de contacto.
Ahorro de espacio: cuando menos es más, al usar iconos es posible el reducir el texto en la interfaz, lo que permite un diseño más limpio y compacto.
Mejorar la estética: los iconos aportan un toque visual al cual hace que la página web se vea más moderna y dinámica.
Guiar al usuario: los iconos no solo se presentan como elementos que refuerzan el contexto de determinado contenido, también funcionan como indicadores visuales para resaltar botones, enlaces o funcionalidades importantes.
¿Cómo añadir un icono en HTML desde una biblioteca?
Como hemos mencionado en puntos anteriores, los íconos se presentan de diferentes formas, y una de las más populares es a través de bibliotecas de fuentes de íconos.
Para utilizar estas colecciones en nuestro sitio web en HTML, basta con enlazar su repositorio mediante un elemento de enlace “<link>” dentro de la cabecera “<head>” de nuestra estructura.
A continuación, haremos mención de las bibliotecas más populares y cómo podemos invocarlas en nuestra página web utilizando HTML.
Añadir un icono en HTML desde Material Icons
(Visita el sitio web haciendo clic en la imagen ↑)
Material Icons ofrece una colección de iconos desarrollada por Google como parte del sistema de diseño Material Design, el cual se basa en presentar una serie de principios y directrices para crear interfaces de usuario consistentes y atractivas.
Material Icons es una de las bibliotecas más utilizadas tanto por desarrolladores como diseñadores para añadir iconos a aplicaciones y sitios web, gracias a su facilidad de uso, versatilidad y estilo moderno. Contando con el soporte directo de Google.
Para comenzar a utilizar Material Icons en nuestro sitio web en HTML solo basta que invoquemos la biblioteca en la cabecera “<head>”, por medio de la siguiente línea de código.
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
Una vez incluida podemos invocar los iconos que podemos encontrar el su repositorio correspondiente por medio de los nombres que le correspondan.
Para obtener un icono en concreto solo bastará con ubicarlo, bien sea desde el listado o desde el propio buscador, una vez encontrado al seleccionarlo se nos desplegará una barra lateral con todas las opciones de integración, entre ellas el código HTML a copiar.
Añadir un icono en HTML desde Bootstrap Icons
(Visita el sitio web haciendo clic en la imagen ↑)
Bootstrap Icons es una biblioteca de iconos basada para su uso complementario en su popular framework de maquetado y desarrollo web.
Esta biblioteca está diseñada para proporcionar iconos modernos, fáciles de usar y personalizables, sin necesidad de depender de fuentes externas. Aunque fue creado como un recurso adicional para Bootstrap, podemos darle uso en cualquier proyecto web, incluso sin usar Bootstrap como base.
Para comenzar a utilizar Bootstrap Icons en nuestro sitio web en HTML solo basta que invoquemos la biblioteca en la cabecera “<head>”, por medio de la siguiente línea de código.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
Si deseamos utilizar un icono en concreto, desde la página oficial podemos usar el buscador para ubicarlo, una vez encontrado al seleccionarlo seremos redirigidos a una vista detalle de dicho icono donde podremos escoger el método de inserción.
En el caso de nuestro ejemplo lo hemos invocado por medio de la etiqueta “<i>” y su clase definida.
Añadir un icono en HTML desde Font Awesome
(Visita el sitio web haciendo clic en la imagen ↑)
Font Awesome es una de las bibliotecas de iconos más populares para el desarrollo y diseño de interfaces web y aplicaciones, ofreciendo una amplia colección de iconos en formato vectorial que puedes integrar fácilmente en nuestros proyectos mediante estilos CSS.
Si bien Font Awesome es ampliamente conocido por su simplicidad, flexibilidad y la posibilidad de personalizar los iconos según sean nuestras necesidades, hay que tener presente que no todos los iconos dentro de su extensa biblioteca se encuentran disponibles para todo público.
Contamos con un amplio catálogo de íconos disponibles de forma gratuita. Sin embargo, si deseamos acceder a la biblioteca completa, que incluye todas las versiones anteriores y herramientas en línea para personalizar íconos con diversas opciones, podemos optar por la versión Pro.
Para este ejemplo, utilizaremos íconos de la versión 5 en su modalidad gratuita. Para hacerlo, simplemente debemos incluir el siguiente enlace en la cabecera de nuestro sitio web.
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'>
Similar al repositorio de iconos de Bootstrap desde la página de Font Awesome podemos buscar y filtrar los iconos de nuestra preferencia por filtros como la versión de la biblioteca, si son iconos limitados a la versión pro, entre otras opciones de estilo y categorización.
Al seleccionar un icono de preferencia se nos va a desplegar una ventana emergente, en la cual podremos obtener códigos de inserción en varios lenguajes de programación, como varias versiones del icono de estar disponibles.
¿Cómo añadir un icono HTML desde una imagen?
A este punto de nuestro recorrido, hemos visto que existe una amplia variedad de bibliotecas de íconos que podemos agregar a nuestro sitio web mediante HTML. Sin embargo, también es completamente válido optar por el uso de imágenes en lugar de íconos en formato de “fuente”, especialmente cuando buscamos diseños más elaborados o creados específicamente para un propósito particular.
Podemos añadir íconos en formato de imagen utilizando formatos convencionales como PNG, y para ello basta con emplear la etiqueta “<img>” en nuestro código HTML.
No obstante, si queremos ahorrar tiempo en la creación y diseño de íconos personalizados que se alineen con el contenido destacado, podemos aprovechar plataformas en línea especializadas en ofrecer bancos de íconos prediseñados.
Un ejemplo destacado de estas herramientas es Flaticon, que nos facilita encontrar íconos listos para usar en nuestros proyectos.
(Visita el sitio web haciendo clic en la imagen ↑)
Conclusión
Los íconos, al igual que cualquier otro elemento visual, son una herramienta poderosa que, aunque pueda parecer “pequeña”, tiene un impacto significativo. Su correcta implementación puede marcar la diferencia entre un contenido simple y uno visualmente atractivo y moderno.
La forma de implementar íconos puede variar según las necesidades y las limitaciones o libertades que presente nuestro sitio web. Todo lo presentado en este artículo es aplicable tanto a sitios básicos estructurados únicamente con HTML y CSS, como a proyectos más complejos, e incluso a plataformas CMS como WordPress o servicios en línea como Shopify.
Saber cómo añadir íconos a una página web mediante HTML es fundamental para mejorar aspectos como la experiencia del usuario y la estética del diseño. Los íconos son elementos visuales que comunican ideas de forma rápida y clara, simplificando la navegación y destacando acciones importantes sin depender únicamente del texto.
Por ejemplo, un ícono de “lupa” se asocia inmediatamente con una opción de búsqueda, mientras que un “carrito de compras” indica funcionalidad de una tienda en línea.
Con esta nueva habilidad, ahora tenemos la capacidad de incorporar íconos en un sitio web para mejorar su aspecto visual, su usabilidad y la interacción de los usuarios con el contenido. Todo esto de forma intuitiva, efectiva y sin complicaciones.
También te puede interesar:
- ¿Cómo crear una página web desde 0?
- Partes de una página web WordPress
- ¿Qué es un blog y para que sirve?
- Mejores 10 editores de código para programar
- Iconos en WordPress, Qué son y cómo usarlos
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y Woocommerce en Webempresa.
