Índice de Contenidos
- Qué son los iconos vectoriales
- Por qué los iconos vectoriales son importantes
- Ventajas de usar iconos vectoriales
- Dónde conseguir iconos vectoriales gratis
- The Noun Project
- Freepik
- Flaticon
- Creative Market
- Iconfinder
- Font Awesome
- Icomoon
- GitHub Octicons
- Icons8
- Glyphish
- GraphicBurger
- Streamline icons
- Pixeden
- Material Icons
- Por qué es más rentable usar librerías de iconos vectoriales
El diseño web ha evolucionado mucho de unos años hasta ahora. Los diseñadores se han adaptado a las nuevas necesidades que han surgido. Ahora se usan los teléfonos móviles mucho más que antes. De hecho, muchos sitios web ya reciben más visitas desde dispositivos móviles que desde desktop (escritorio).
Este nuevo uso de Internet móvil ha obligado a los desarrolladores a adaptarse y optimizar las webs para que se vean bien en móviles y tablets y, sobre todo, para que sean rápidas. El usuario medio que usa un smartphone de gama media o alta es muy exigente. Todos queremos inmediatez y preferimos una web práctica y rápida antes que una bonita pero lenta.
De entre los cambios que han ocurrido en el proceso de diseño web, destacamos el uso de iconos vectoriales en detrimento de las imágenes pesadas. Los buenos diseñadores intentan usar iconos vectoriales siempre que pueden, en lugar de imágenes pixeladas. Veamos por qué.
Qué son los iconos vectoriales
Los iconos vectoriales son pictogramas bidimensionales. Se caracterizan por su sencillez y representan versiones reducidas de conceptos, en lugar de utilizar imágenes complejas. Cada icono se centra en ser funcional y representar una idea de la forma más simple posible. Muchos de ellos representan objetos físicos para identificar secciones o categorías de un sitio web.
Otra característica importante de los iconos vectoriales es que no se deforman ni se pixelan cuando se aumenta o reduce su tamaño. Esto es un detalle muy importante al desarrollar sitios que se van a ver en dispositivos móviles con muy buena resolución de pantalla, donde se perciben hasta los píxeles.
Además de sus características propias, los iconos vectoriales tienen más ventajas en el diseño web. Se usan mucho en el estilo flat design, o diseño plano, porque su premisa es la sencillez y el minimalismo. Las webs de este estilo hacen mucho uso de iconos porque no necesitan imágenes muy elaboradas o con efectos especiales.
Por qué los iconos vectoriales son importantes
Usar iconos vectoriales aporta muchas ventajas en cualquier proyecto de diseño web. Son más fáciles de manipular y muy flexibles al no estar diseñados pixel a pixel. Además, en diseño web hay que cuidar mucho el peso de los archivos que componen la web, y las imágenes vectoriales cumplen ese requisito a la perfección.
Además, existe un tipo de imágenes vectoriales que son muy útiles para el desarrollo web. Se trata de los iconos para fuentes.
Habrás visto muchas veces iconos o emojis entrelazados con el texto o los encabezados. Si te fijas, puedes seleccionarlos igual que si fueran parte de la tipografía. Este tipo de iconos vectoriales son mucho mejores que los iconos en jpg porque pesan mucho menos y se pueden editar igual que el resto de caracteres. Puedes editar su color o tamaño y, además, puedes aplicarles estilos CSS para conseguir el acabado que quieras.
¿Y si no encuentras iconos para la fuente que estás usando? No hay problema, puedes usar herramientas online para crear los tuyos propios o descargar fuentes de iconos en Fontawesome. En cualquier caso, no importa el tipo de proyecto web, porque estas fuentes de iconos se pueden integrar con cualquier lenguaje, tecnología o CMS.
Ventajas de usar iconos vectoriales
Usar iconos vectoriales en sustitución de imágenes tiene muchas ventajas, algunas de las cuales son las siguientes:
- Se pueden implementar fácilmente si las cargas en una hoja de estilos CSS sin necesidad de usar JavaScript (que también permite esa opción).
- Son de fácil edición mediante selectores o clases de CSS, igual que haces con el resto de fuentes.
- El formato vectorial tiene la extensión SVG, lo que evita que pierdan calidad o se pixelen los iconos.
- Se visualizan perfectamente en dispositivos móviles y en todos los navegadores, ¡incluso en Internet Explorer!
- Son ideales para verse en pantallas de gran resolución, incluso reciben soporte para pantallas de Retina Display de Apple.
- La mayoría de fuentes de iconos tienen licencia libre, incluso para uso comercial.
- Y lo mejor de todo es que puedes encontrar miles de iconos vectoriales gratis.
Es un hecho que el uso de iconos vectoriales tiene muchas ventajas. Los diseñadores los usan siempre que pueden, en lugar de imágenes. Aunque también es cierto que el uso de imágenes casi siempre es inevitable, pero su uso se puede reducir a lo imprescindible gracias a los iconos vectoriales.
También hay algún inconveniente al usarlos y es que no todos los navegadores los soportan… más concretamente, Internet Explorer 8. Pero cualquier desarrollador te dirá que eso no es un inconveniente, sino lo más normal del mundo.
Dónde conseguir iconos vectoriales gratis
De acuerdo, ya sabes lo importante que es usar iconos vectoriales en tu sitio web, pero necesitas lo más importante: ¿dónde conseguir iconos vectoriales gratis?
Te muestro los sitios de Internet a los que acuden todos los diseñadores en busca del icono perfecto para descargar. Hay herramientas que permiten tanto descargas de pago como gratuitas. Todas tienen un gran catálogo de iconos que puedes buscar por categorías, estilo o lo que representan.
A continuación tienes los 14 portales más famosos para descargar iconos vectoriales gratis y de pago.
The Noun Project
La web de thenounproject.com tiene una base de datos enorme que se actualiza a diario con cientos de nuevos iconos. En este sitio son los propios usuarios quienes se dedican a crear y publicar sus propios iconos. Hay mucha actividad ya que la comunidad de creadores recibe recompensas económicas cada vez que alguien compra sus iconos. También tiene una membresía de pago mensual o anual que ronda los 40 dólares y te da derecho a descargar todos los que quieras y libre de licencias para su uso.
Freepik
Freepik es una web repleta de iconos vectoriales gratuitos, además de fotos de stock y plantillas PSD. Lo destacable de este mercado online de recursos gráficos es que hay una gran empresa española detrás. Y no cualquier empresa, sino una de las que más rápido ha crecido en Europa.
Ofrecen descargas de archivos tanto en formato SVG como en PNG y EPS. Sus iconos están diseñados en blanco y negro, y se pueden elegir en estilos 2D o 3D, en línea y vectorial. Su suscripción de pago varía entre 7,5 y 9,99€ al mes. Tienen acuerdos con Flaticon y Shutterstock para ofrecer sus productos mutuamente a sus usuarios.
Flaticon
Flaticon es una subsidiaria de la web mencionada antes: Freepik. Disponen de una librería de iconos gratuitos con decenas de miles de archivos. También ofrecen un servicio de suscripción premium con miles de nuevos iconos cada mes, a partir de 9,99 dólares al mes.
Creative Market
Creative Market no está dedicada exclusivamente a iconos pero tienen un catálogo con miles de fuentes, plantillas web, presentaciones y casi cualquier cosa que necesites. También se sustenta con el trabajo de casi 30000 creadores independientes que son recompensados con parte de los beneficios.
No tiene mucho donde elegir en su versión gratis. Pero puedes obtener packs de iconos vectoriales desde 2 dólares.
Iconfinder
Iconfinder es una web mítica en cuanto a ofrecer vectores gratis. Se podría decir que es la más popular de Internet para descargar, tanto gratis como de pago. Los pagos por cada icono son muy reducidos, rondando el $1. Y también dispone de planes premium desde solo $9 al mes.
Una opción que me gusta mucho de esta web es que si no encuentras el icono vectorial que necesitas, puedes pedir un diseño a medida. El funcionamiento es muy sencillo. Mandas un mensaje al editor que elijas y acordáis un precio. Primero pagas y cuando el diseñador te entrega el trabajo puedes solicitar modificaciones o aprobarlo. ¡Así de sencillo!
Font Awesome
La web de Font Awesome es muy famosa entres diseñadores y maquetadores web. Su especialidad son los icon-fonts o iconos por fuentes, que se implementan como si se tratase de una tipografía más. Tiene una librería muy completa con iconos de todo tipo que puedes descargar junto con su propio archivo CSS.
No son realmente iconos svg o vectoriales sino, más bien, fuentes de iconos. Pero puedes usarlos también para reducir la carga de tu web.
Icomoon
El repositorio de iconos Icomoon es muy práctico si quieres generar tus propios iconos vectoriales. Puedes subir tus propios iconos y editarlos o combinarlos con otros. Además te permite exportar los iconos como SVG o como fuente. Merece la pena echarle un vistazo si eres de los que buscan exclusividad.
GitHub Octicons
GitHub también ha lanzado Octicons, su propio repositorio de iconos vectoriales. Lo mejor es su licencia que te permite usarla libremente. La versión de pago está a partir de $12 al mes.
Icons8
Personalmente, me gusta mucho la web de icons8 porque, además de iconos, también te permite descargar música y fotos. Pero si te dedicas al diseño de producto, debes probar su software Lunacy, que le hace la competencia a Sketch y funciona en entorno Windows, ¡incluso puedes importar archivos .sketch!
Glyphish
Glyphish tiene también una variedad muy grande de iconos para descargar en distintos tamaños y formatos (PNG, SVG, JPG). Sus iconos están especialmente diseñados para dispositivos iOS y para diseñar con Sketch. Usan licencia Creative Commons. Sobre todo, venden packs de iconos por unos 25 dólares y te incluye los formatos PNG, SVG, PSD y AI.
GraphicBurger
Con GraphicBurger tienes a tu disposición un gran mercado con mockups, plantillas, texturas y, por supuesto, imágenes o iconos vectoriales. Tiene un catálogo tan grande de productos que puedes encontrar casi cualquier cosa. Solo tienes que elegir la categoría correcta y el estilo que te gusta. Lo bueno es que está incluida en la suscripción mensual de Envato.
Streamline icons
La web de streamlineicons.com presume de tener la librería de iconos más grande del mundo. Tiene más de 30000 iconos que puedes comprar por packs y elegir el diseño y tamaño antes de descargarlos. Además, ofrecen una aplicación muy sencilla para editar iconos como alternativa a iconjar. Su sitio web carga extremadamente rápido, lo que facilita mucho su uso y la búsqueda de iconos. Aunque tiene un inconveniente muy notable, su precio elevado.
Pixeden
Pixeden ofrece todo tipo de recursos gráficos para diseño de todo tipo: flyers, logos, plantilla de páginas web. En ella encontrarás desde icon fonts hasta imágenes vectoriales muy elaboradas.
Como la mayoría de webs que ofrecen iconos vectoriales, Pixeden tiene muchos productos gratis y una suscripción de pago desde los 10 dólares mensuales.
Material Icons
¿Quién podría estar detrás de este mercado sino el gran Google?
Material icons es propiedad de Google y pone a tu disposición miles de iconos simples, modernos y mobile friendly, como a ellos les gusta. Siguen sus propias directrices de diseño para crear los iconos.
Estos iconos pesan muy poco y están diseñados especialmente para generar una buena experiencia de usuario. Son de código abierto y puedes usarlos tal cual o editarlos a tu gusto. Los puedes descargar en formato PNG o SVG.
Por qué es más rentable usar librerías de iconos vectoriales
Si eres diseñador, seguro que te encantaría usar tus propios iconos vectoriales. Pero, por la falta de tiempo, no siempre es posible. Y se podría decir que tampoco es rentable, habiendo tantas librerías de iconos vectoriales gratis y de pago, pero baratas.
Otra opción es modificar iconos ya existentes. Si quieres editar los archivos SVG necesitarás algún programa de edición vectorial como, por ejemplo Adobe Illustrator. Aunque te recomiendo usar Inkscape porque es libre y de código abierto. Y, además, con Inkscape puedes vectorizar imágenes de forma muy sencilla y rápida.
Gracias a los sitios como estos 14 que te he mostrado aquí, tienes tantos iconos donde elegir que puedes perderte buscando. Mejor buscar cuando ya tengas claro lo que necesitas. Los precios son muy bajos y, los diseñadores y agencias que tienen suscripciones premium los amortizan sobradamente.
No te quedes atrás y avanza al paso de las necesidades de los usuarios web. Quieren y exigen velocidad, diseño y sencillez. Todo esto lo puedes conseguir si usas iconos vectoriales en tus diseños.