El hecho de utilizar iconos es una de las formas más sencillas y rápidas de hacer que tu diseño luzca más interesante y atractivo. No solo se resume a lo estético, los iconos ayudan a entender una interfaz guiando a los usuarios a través de la página y enseñándoles lo que hace cada botón o enlace que la integra.
En este artículo he compilado una serie de 9 paquetes de iconos totalmente profesionales que no te costarán ni un duro. Los he separado en 3 categorías distintas: fuentes de iconos, iconos SVG e iconos CSS. Antes de entrar en materia, echemos un vistazo a los pros y los contras de cada uno de estas categorías.
Fuentes de iconos
Las fuentes de iconos vienen genial si tienes que usar muchos iconos en una web y quieres que tengan un diseño muy basiquito. Son monocromáticos y se resumen a formas simples. Estas fuentes de iconos son interpretadas como texto para los navegadores, por lo que deberás normalizarlas para evitar problemas de anti-aliashing. ¿Lo mejor? Son compatibles con casi todos los navegadores.
Iconos SVG
El Scalable Vector Graphics (SVG) es un formato de gráficos vectoriales basado en XML que puede ser redimensionado a cualquier tamaño sin perder ni un ápice de calidad. Puedes mostrarlos utilizando CSS, tags de objetos, tags de imágenes o inline directamente en el HTML. Por regla general, los archivos SVG son compatibles con los navegadores modernos, pero carecen de soporte en versiones antiguas de IE.
Iconos de CSS
Si tienes que utilizar pocos iconos, los iconos de CSS te pueden venir a las mil maravillas. Todo lo que debes hacer es copiar el CSS del icono que te guste y pegarlo en la hoja de estilo de tu proyecto. Existe el riesgo de que el icono se vea distinto dependiendo del navegador.
Habiendo dicho esto, vamos a ver los diferentes paquetes de iconos:
Feather Icons
Feather es uno de los paquetes de iconos open source más populares de la web. Todos los iconos están diseñados para un grid de 24x24 y cuentan con el mismo estilo de esquinas redondeadas, otorgándoles un look compacto.
Tipo: Iconos SVG
Número de iconos: 240
Linea
Linea te ofrece una vasta cantidad de iconos con un aspecto, sinceramente, único en todos los sentidos. Todos ellos están indexados en distintas categorías como Básicos, Música, Ecommerce, Software y muchas más...
Tipo: SVG, PNG y fuente de iconos
Número de iconos: +730
Octicons
Octicons es un paquete de iconos SVG escalables de GitHub. Incluye iconos que puedes ver en GitHub y demás relacionados con el mundo de la programación, como iconos para bases de datos, iconos de operaciones git y mucho más...
Tipo: SVG
Número de iconos: +170
Glyph
Un paquete de iconos SVG que cuenta con unos iconos diseñados a la perfección y preparados para las últimas tendencias en diseño web. En el GitHub del proyecto puedes descargar un script de Node.js para personalizar el paquete de iconos incluyendo solamente aquellos que necesites.
Tipo: SVG
Número de iconos: 800
Font Awesome
La fuente de iconos más popular de todo Internet, te ofrece una gran colección de iconos que se han construido especialmente para que se adapten a todo tipo de resoluciones, navegadores y pensando siempre en la accesibilidad para esos usuarios con discapacidad visual.
Tipo: Fuente de iconos
Número de iconos: 675
Ionicons
Un conjunto de iconos con un diseño alucinante creado por el equipo que también desarrollo el framework Ionic. Te proporciona más de 260 iconos guapísimos, algunos en estilo flat y otros con aspecto de línea, que se lleva más ahora...
Tipo: Fuente de iconos
Número de iconos: +260
Material Icons
El paquete de iconos oficial para el lenguaje Material Design de Google y los iconos que utiliza el SO Android. Contiene más de 900 iconos creados, logicamente, con apariencia material, garantizando siempre un buen aspecto cuando se combinan varios de ellos.
Tipo: Fuente de iconos
Número de iconos: +900
Icono
Colección de iconos hechos con puro CSS. Para implementarlos, lo único que tienes que hacer es descargar la hoja de estilo, crear un elemento HTML y asignarle las clases apropiadas. Todos los iconos están creados para que solo tengas que crear un elemento HTML para que funcionen.
Tipo: Iconos de CSS
Número de iconos: 130
CSS Icon
Otro paquete de iconos hecho con CSS y nada más. El proyecto cuenta con una web en la que puedes probar todos los iconos, y en la que puedes ver también como se crea cada parte de su diseño. Si solo necesitas un par de iconos, puedes copiar el CSS de estos en tu hoja de estilos sin necesidad de descargar nada de nada.
Tipo: Iconos de CSS
Número de iconos: 190