Tabla de contenido
9 packs de iconos gratuitos para desarrolladores web
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 hemos compilado una serie de 9 packs gratuito de iconos profesionales. Los cuales están separados en 3 categorías distintas: fuentes de iconos, iconos SVG e iconos CSS. Antes de entrar en materia revisemos algunos pros y contras de cada uno de estas categorías.
[irp posts=»366″ name=»Curso JavaScript para Principiantes»]
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.
9 paquetes de iconos para desarrolladores
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 24×24 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
[irp posts=»418″ name=»Fundamentos Básicos para el SEO móvil de un sitio web»]
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
