Iconos gratis para tu web: TOP 20 mejores páginas

Introducción

Muchos diseñadores y desarrolladores de páginas web implementan una serie de elementos indispensables para crear o diseñar una página web que les permiten llegar al resultado deseado, un sitio atractivo y totalmente funcional.

Ahora bien, uno de esos elementos son los iconos web, ¡Sí!

Un elemento que además de ofrecer una estética diferente a la web, aporta un sinfín de beneficios.

Y es precisamente de estos que hablaremos hoy: los definiremos, te diremos cómo implementarlos, y como plus, te dejamos un Top 20 de los mejores bancos de iconos gratis.

¡Entremos de lleno al tema!

¿Qué es un icono web?

Antes de hacer referencia al significado enlazado con las páginas web, es importante tener claro que un icono representa la definición gráfica de un símbolo o signo y su principal función es simplificar la asimilación de un mensaje.

En otras palabras, los iconos son figuras utilizadas para reemplazar conceptos, es decir, estos sustituyen una idea o cosa de manera emblemática.

En este sentido, los iconos pueden contener un interés decorativo, figurativo o significativo.

Ahora bien, en el ámbito de los sitios web, surge el concepto de icono web, y por correlación, este se define como el símbolo gráfico que aparece en una página web y representa un objeto o una acción capaz de comunicar un mensaje.

Existen muchos tipos y clases de iconos web, y cada diseño dependerá principalmente del lugar en donde sean ubicados dentro de la web.

Por otro lado, estos se pueden obtener de bancos de imágenes (gratis y de pago) o bien puedes diseñarlos tú mismo.

Como decíamos al inicio, un icono web no es un mero elemento decorativo, sino que forma parte importante de los mecanismos de interacción de cualquier interfaz.

A continuación te diremos algunas de las ventajas de utilizarlos:

• Mejoran la estética y proporciona una mejor experiencia de usuario; atraen la atención del usuario hacia la zona en la que esté.
• Ayudan a separar visualmente los bloques de contenidos.
• Aligeran aquellas secciones extensas.
• Aportan personalidad y singularidad a un diseño.
• Ayudan a reducir el contenido innecesario
• En el aspecto técnico, ayudan a que la página sea más rápida.
• Rompen la monotonía visual del diseño; aportan estilo; entre otros.

Por otro lado, a pesar que los iconos web proporcionan muchos beneficios, estos también pueden traer ciertos problemas. No debemos olvidar, que estos son subjetivos.

Por lo tanto, cada persona puede tener una interpretación individual a partir de su experiencia. Estos nunca serán totalmente claros e inequívocos, por lo que existe el riesgo de ser malinterpretados.

Nuestra recomendación es que no los utilices para operaciones importantes y decisivas.

¿Cómo poner un icono gratis en tu página web?

Implementar un icono web es una tarea muy sencilla.

Existen diversas opciones sobre dónde conseguirlos y a continuación te diremos en qué consiste cada una de estas:

• A través de un maquetador visual.
  Todos los plugins que ayudan en la creación de una página web traen consigo una serie de iconos web.
• Con los temas para WordPress.
  Las plantillas o temas para WordPress también incluyen sus propios iconos web.
  En el caso de las plantillas de pago, su repertorio es un poco más extenso y trae de diversos estilos.
• Con plugins especializados.
  Existen plugins para insertar iconos. Entre algunos de los más conocidos tenemos Better Font Awesome (gratuito) e IconPress Pro (Premium), este último incluye más de 100.000 iconos en formato SVG y pueden ser utilizados a través de un maquetador.
• A través de herramientas online de iconos web : Bancos gratuitos.
  Una opción más accesible que proporciona infinidades de opciones en estilos y diseños, son los bancos de iconos web gratis online.
  Y precisamente sobre esta última opción que en el siguiente apartado te dejaremos algunas de las mejores páginas donde podrás encontrar una cantidad enorme de iconos gratis.

Ahora bien, con relación al modo de poner un icono gratis en tu página web también existen varias alternativas:

• Con las páginas de iconos gratis (la modalidad que hoy nos concierne), solo tienes que seleccionar el icono que te agrada y elegir el formato de descarga (VSG o PNG). En el caso de que elijas PNG, tendrás la opción de cambiar el tamaño del icono, mientras que con VSG no es posible porque son gráficos escalables. Luego queda que le des en descargar gratis para guardar el icono.
• Lo siguiente es que copies el código HTML y lo pegues en un lugar seguro. Para utilizarlo, pega el HTML en la página y listo.

Mejores bancos de iconos gratis para tu web: TOP 20

¡Hemos llegado al meollo del asunto! Sí, es momento de presentarte el top 20 de los mejores bancos de iconos gratis para páginas web.

En esta lista encontrarás de varios tipos: PNG, VSG y para introducir en CSS. ¡Vamos a por ello!

Streamline Icons

Streamline Icons es uno de los bancos de iconos gratis para web más demandados.

Funciona como un buscador de iconos online y tiene en su repertorio más de 100000 iconos, emojis e ilustraciones idóneos para cualquier sitio o proyecto web. Exactamente, Streamline cuenta con más de 10500 iconos, agrupados en 53 categorías y unas 720 subcategorías.

La gran ventaja de esta herramienta es que te permite personalizar los iconos a conveniencia de tu marca, las opciones de diseño estético son ilimitadas.

Con cada uno de sus iconos tendrás la opción de crear un diseño amigable y totalmente profesional, y lo mejor de todo, es que editarlos te resultará una tarea muy fácil, ya que todos se encuentran en formato SVG.

Pueden ser utilizados en aplicaciones móviles, sitios web, infografías, diseño de reloj inteligente, impresiones CMYK, entre otros.

Además, su biblioteca de iconos gratis es compatible con los principales software de diseño como Adobe Illustrator, Adobe XD, Sketch, etc.

Por otro lado, este banco ofrece iconos basados en vectores que se pueden cambiar de tamaño, sin perder la calidad.

Flat Icon

Otro excelente banco de iconos gratis para sitios web es Flaticon. Allí vas a encontrar más de 800.000 iconos vectoriales, distribuidos en más de 15000 packs.

Aunque esta cantidad varía día a día, ya que en este participan varios diseñadores que suben recursos continuamente.

Lo mejor de esta herramienta es que encontrarás muchos gráficos en diversos formatos: PNG, SVG, PSD, BASE 64 y EPS. Adicionalmente, ofrece un paquete anual de pago donde incluye más de 5500000 de iconos y stickers.

Una de las particularidades de este banco de iconos gratis es que ofrece la posibilidad de dar color a sus iconos monocromáticos, porque sí, todos sus iconos son en blanco y negro.

Además, como parte de la edición, permite modificar la posición, la rotación y las escalas.

Ahora bien, para poder hacer uso de sus packs de iconos debes registrarte, al igual que si quieres editar el icono desde la plataforma.

Por otro lado, cuenta con dos tipos de licencias

• Gratuita, que requiere atribución y presenta algunas limitaciones para proyectos comerciales.
• Premium, que no requiere atribución y puedes hacer de todo, sin importar si es un proyecto comercial o personal.

Iconfinder

Al igual que los anteriores, este banco de iconos gratis dispone de una gran cantidad de iconos web, exactamente, con más de 2000000 de iconos en SVG, AI, CSH y PNG.

Cuenta con packs de iconos gratis y de pago, un buscador de diseñadores y un editor de iconos online. Sin lugar a dudas, una de las páginas de iconos web más completas del mercado.

En el caso del buscador, este permite filtrar por tipo de licencia, tamaño, color de fondo y precio.

Esta herramienta de iconos gratis dispone de 2 tipos de licencias: la gratuita, que exige atribución y la Premium, que no requiere atribución.

En cuanto al registro, no es necesario hacerlo si deseas descargar, sin embargo, presenta limitaciones diarias en cuanto a la cantidad de descargas, pero si te registras esta limitación disminuye.

Vecteezy

Vecteezy es otro de los mejores portales que ofrecen iconos gratis. En su haber podemos encontrar más de 15 mil iconos y vectores gratuitos, con formatos como SVG, PNG, JPG, PF, EPS y AI.

Como sucede con la mayoría de estos sitios, los iconos gratuitos requieren atribución; sin embargo, si adquieres las versión pro, tienes el derecho de eliminar dicha atribución.

Posee un buscador y los filtros son por palabra clave, orientación, tipo de licencia y ordenar por.

Así mismo, dispone de un editor de SVG basado en la web, el cual ayuda a las empresas a desarrollar ilustraciones haciendo uso de formas reconocibles, plantillas y herramientas de edición de textos, además de que permite personalizar el contenido ya disponible antes de descargarlo.

Icofont

Iconfont es otro portal repleto de iconos gratis de excelente calidad.

Concretamente en esta página encontrarás más de 2000 iconos distribuidos en varias temáticas (29 categorías exactamente) y pueden ser descargados en formato SVG o implementarlos en la web en formato Icon Font.

Su versatilidad parte en que son iconos que pueden ser usados para la web, dispositivos móviles, para el escritorio, etc.

Y lo mejor de todo es que no exige registro para poder acceder a todo el contenido.

Adicionalmente podemos decir que encontrarás colecciones impresionantes de iconos modernos e ideales para cualquier fin.

Ahora bien, para poder descargar los recursos disponibles en la web, solo tendrás que seguir el enlace a la colección de iconos gratuitos.

Recuerda, que a diferencia de otros bancos de iconos web, en Icofont todos los iconos son gratuitos y no requieren atribución. ¡Excelente!

Iconstore

Un buen sitio web donde puedes encontrar iconos gratis es Iconstore.

Aquí podrás navegar por diversas categorías de diferente índole para encontrar iconos de excelente calidad, desarrollados por diseñadores que han publicado de forma gratuita, aunque algunos piden donaciones.

Sus iconos son tan buenos que han estado en las mejores posiciones en producthunt, compitiendo con otras webs de iconos gratis de buena calidad.

Ahora bien, los iconos gratuitos de Iconstore se encuentran disponibles en formato vectorial, con extensión PNG, SVG y PSD.

Un detalle interesante de este sitio es que tienes la posibilidad de descargar directamente cualquiera de los packs, sin necesidad de registrarte y sin ningún tipo de limitación.

Además, como la tienda dispone de una bonita y atractiva interfaz, la búsqueda de los iconos se hace de manera sencilla y rápida.

Boxicons

El lugar #7 de los mejores bancos de iconos gratis para sitios web lo ocupa Boxicons, una página que proporciona un conjunto de iconos simples de código abierto, cuidadosamente elaborados para diseñadores y desarrolladores.

Cuenta con más de 1500 iconos pensados para enriquecer la experiencia de todo sitio web que desee implementarlos como recurso gráfico.

En cuanto a la licencia, los archivos de iconos (SVG) los puedes descargar gratis y tienen licencia CC 4.0. Ahora, los archivos de fuentes tienen licencia SIL OFL 1.1.

Por otra parte, no requieren atribución, aunque no estaría de más hacerlo, de seguro te lo agradecerán.

Boxicons además de los iconos gratis ofrece muchas más funciones. Además sigue las pautas oficiales de Google Material Design.

Linearicons

Por su parte, Linearicons forma parte de los buscadores de iconos gratis más eficientes que existen.

En su haber puedes encontrar más de 1000 iconos vectoriales y rasterizados ultra nítidos, en donde puedes descargarlos en diferentes tipos de formatos:

• SVG (gráficos vectoriales)
• EPS (PostScript encapsulado)
• PNG (20px, 40px, 60px etc.)
• CSH (formas personalizadas de Photoshop)
• AI (Adobe Illustrator)
• PDF
• TTF,

Ahora bien, tanto los SVG como las fuentes son extremadamente personalizables. Puedes modificar el color, el tamaño o agregarles efectos CSS.

Por otro lado, sus iconos han sido probados en pantallas de PPI normales y altas para garantizar que se visualicen correctamente en todas las plataformas.

Linearicons es un portal que ofrece tantos paquetes de iconos gratis como de pago con una política de reembolso antes de los 14 días.

Tilda

Tilda es una plataforma que permite crear sitios web sin saber programar, y como parte de sus recursos ofrece más de 40 packs de iconos vectoriales que pueden ser usados tanto en proyectos personales como comerciales.

En este sentido, dispone de más de 700 iconos en formato SVG que pueden ser descargados sin necesidad de estar registrados. Adicionalmente, permite modificar los iconos según las necesidades de cada proyecto.

Como parte de su buen funcionamiento, ha clasificado todos estos iconos en categorías divididas en pequeños paquetes temáticos.

Por otro lado, concede una licencia de forma no exclusiva como parte de un diseño, la cual exige un crédito mediante la incorporación de un enlace a tilda.cc.

Fontello

Fontello es un generador de iconos en donde puedes desarrollar tu propia colección de iconos, importante diferencia en relación a otros bancos de iconos gratis.

En este portal podrás generar tu propia colección de iconos y luego empaquetarla en un formato de fuente.

Bajo esta modalidad podrás escoger iconos desarrollados por proveedores externos para crear tu colección propia, simplemente descargándolos en cada uno de los sitios oficiales y luego arrastrándolos a la web de Fontello, para finalmente darle un nombre a la colección y descargarla.

Con ello, se generará un archivo .zip en el que estarán todos los iconos que necesitas para utilizar en tu sitio web.

Como dijimos al inicio, en esta página también podrás encontrar una buena cantidad de iconos, los cuales puedes personalizar según las necesidades de tu sitio web.

Lo mejor de todo, es que no necesitas ningún tipo de registro para acceder a todos sus servicios.

Simple Icons

Simple Icons es una organización que ofrece más de 2134 iconos SVG gratuitos, aunque también se pueden descargar en formato PDF. Los iconos están clasificados en diversas colecciones.

La web es muy limpia y fácil de usar. Contiene un buscador que permite filtrar los iconos por temática.

Line Icons

Line Icons es otro de los mejores bancos de iconos gratis para páginas web. Ofrece iconos de línea libre para interfaces de usuario innovadoras y modernas de proyectos de diseño tanto de aplicaciones web, móviles y de escritorio.

Cuenta con el más completo paquete de iconos de líneas disponible en la web.

Se encuentra repleto de más de 5000 iconos, distribuidos en diferentes categorías capaces de cubrir las necesidades de todo proyecto web o de aplicaciones.

Además altamente legibles, pudiéndose ver a la perfección en pantallas de ordenadores, tablets y dispositivos móviles.

Por otro lado, dispone de una versión básica, la cual es completamente gratuita y permite usar, incrustar, editar y distribuir una buena parte de los iconos en cualquier proyecto.

Así mismo, encontrarás la versión pro, donde las posibilidades se incrementan a más de 5000 iconos, con una alta tasa de personalización.

365psd

365psp es una aplicación muy fácil de usar que proporciona un archivo en formato PSD de forma gratuita día a día.

Allí podrás encontrar diversos recursos gráficos, desde marcos para fotografías hasta botones para páginas web, y obviamente, un sinfín de iconos gratis.

Todos estos elementos se encuentran clasificados por etiquetas y con la información del autor.

La web es muy sencilla y práctica, sin embargo no ha dejado de lado el diseño.

En la misma encontrarás una galería con los trabajos que los desarrolladores van subiendo, y en caso que sea de tu agrado, te da la opción de descargarlos para que luego puedas modificarlos en Photoshop.

Smashing Magazine

El sitio web Smashing Magazine es una de las principales empresas de publicación en el campo del diseño y desarrollo web a nivel mundial.

Y como parte de su trabajo, ofrecen un conjunto de iconos útiles para aplicaciones web, iconos de interfaz de usuario, iconos de uso general, iconos de comercio electrónico, iconos de escritorio, iconos de botones, iconos de teclado, iconos de emoticones, iconos de servicios y muchos más.

Ahora bien, lo mejor de todo esto es que puedes utilizar todo ese conjunto de iconos para tu proyecto de forma gratuita y sin restricciones. No importa si es para uso personal o comercial.

Feather icons

Entre otros de los mejores bancos de iconos gratis encontramos a Feather Icons, un pequeño buscador de iconos que contiene más de 300 iconos web, los cuales se pueden filtrar por el tamaño de los mismos.

Cada icono está diseñado en una cuadrícula de 24px x 24px con un fuerte énfasis en la simplicidad, la flexibilidad y la consistencia, y cuya descarga se procesa con el formato SVG.

Elegant Themes

La gran compañía Elegant Themes se ha dado a la tarea de crear la fuente de iconos más completa, hermosa y elegante de la web, y lo mejor de todo es que la impartieron de manera gratuita.

Ahora bien, a diferencia de los iconos tradicionales que podemos encontrar en la mayoría de los bancos de iconos, estos se encuentran dentro de un archivo de fuente, lo que significa que están desarrollados en vectores y por tanto pueden modificarse sin afectar la calidad.

Por lo cual, el resultado siempre será un icono hermoso y nítido, sin importar desde qué tipo de pantalla esté siendo admirado.

Por otro lado, los iconos de Elegant Themes tienen doble licencia bajo GLP 2.0 y MIT, y como dijimos al inicio, su uso es completamente gratuito.

Paul Olyslager

En esta ocasión no haremos referencia a una página o a un banco de iconos web gratis, sino hablaremos de un excelente diseñador que ha causado bastante algarabía en el mundo del diseño y desarrollo web.

Paul Olyslager es un diseñador originario de Amberes (Bélgica) y se considera un obsesionado con la usabilidad web, el diseño de UX (experiencia de usuario) y UI (interfaz de usuario).

Sus inicios fueron como diseñador gráfico en una empresa española, pero luego se convirtió en un diseñador de interfaces, y entre uno de sus trabajos más destacados podemos mencionar el diseño de la interfaz de la tienda Espirit y Hugo Boss.

Actualmente trabaja como UX Designer para Home24, una tienda online de muebles, donde cuentan con un inventario de más de 80000 productos.

Es desde allí donde ha desarrollado gran parte de su trabajo como diseñador de iconos web, que por cierto destacan en forma y diseño entre tantos otros que podemos encontrar en el mercado.

Speckyboy

A veces resulta complicado encontrar iconos perfectos para un proyecto en específico; sin embargo con Speckyboy esta tarea suele resolverse fácilmente.

Esta página o banco de iconos gratis tiene en su haber un conjunto de iconos que abrazan fuertemente la belleza de la simplicidad.

Dicha colección de iconos gratuitos que ofrecen se encuentran disponibles en diversos formatos como:

• SBG.
• PSD.
• AI.
• EPS

Y para muchas aplicaciones de interfaz de usuario como Figma o Affinity Designer, pudiéndose utilizar tanto en proyectos personales como comerciales, dependiendo el tipo de licencia.

Nasty icons

Por último, pero no menos relevante, te presentamos el set de iconos gratis vectoriales Nasty Icons de Webalys, el cual se encuentra constituido por 50 iconos bastante peculiares, inspirados en situaciones un tanto descabelladas.

Allí podrás encontrar iconos, que como su propio creador los describe, parecieran tener vida propia y actuaran de forma sucia, como beber, tener sexo, etc.

Este set lo puedes descargar de manera gratuita y lo único que tienes que hacer es realizar una pequeña mención en Facebook.

Los puedes utilizar como ilustraciones, logos o en lo que tú quieras.

Conclusiones

La gran peculiaridad de los iconos web es que transmiten una idea o mensaje de una manera diferente a como lo haría un texto, incluso una fotografía.

Estos expresan un mensaje mucho más ligero, además añaden un atractivo especial a cualquier contenido donde se les integre, permitiendo a su vez que los usuarios puedan procesar mejor la información.

Por tanto, la elección correcta de los mismos no es una tarea que debe llevarse a la ligera, pero por suerte esa parte ya la tienes casi resuelta.

¿Qué te ha parecido el top 20 de los mejores bancos de iconos gratis para páginas web? Bueno ¿Verdad?

Esperamos hayas encontrado el diseño de icono que mejor se adapte a tu proyecto online y puedas implementarlos de la mejor manera.

Nos vemos en una próxima entrega.

FUENTES

• Venngage.
• JosCode.
• Punit Chawla
• Falcon Masters
• Yiminshum.com