Banco de Iconos gratuitos: ¿En que lugares puedo ponerlos en mi web?

Aunque es difícil decirle que no a una buena imagen, sabéis que en Silo Creativo somos más de ilustración. Nos encanta acompañar a nuestros artículos de ilustraciones por dos razones principales: I love icons (así, sin paños calientes), y conseguimos que la web sea mucho más ligera (culpa de esto la tiene Ricardo con su obsesión de que la web pese lo menos posible). 🙂

Así, que ya era hora que dedicáramos un articulo a las ilustraciones, y por ende, a una de las formas principales de uso de las mismas en diseño gráfico y web: los iconos. Estos son una muy buena herramienta para expresar lo que queremos de una forma concreta, sencilla, y con mucho diseño.

Poco a poco se han ido introduciendo en nuestro subconsciente, como si de señales de trafico habláramos, y muchos se han convertido en el significado universal de ciertos procesos. Seguro que si entramos en una web y vemos un carrito, no nos queda ninguna duda de que a partir de ahí podremos comprar. De la misma manera que si vemos un sobre, posiblemente sea el botón para contactar.

Como hemos dicho en muchas ocasiones, lo importante en una web es el texto que tenemos, lo que nosotros escribimos, por lo que los iconos pueden ayudarnos a no introducir más texto del necesario y poder ser un poquito más visuales. Hay muchos lugares en los que poder insertar iconos, ¿vemos alguno de ellos?

¿Dónde usar iconos en nuestra web?

Aquí viene lo bueno, los puedes usar en casi todos los puntos de la web. Aunque hoy os propongo algunos, hay muchos más. Siempre que enfaticen el texto o consigan crear un bonito efecto visual, los iconos conseguirán su objetivo. Pero cuidado! No conviertas tu web en un jeroglífico egipcio, las palabras siguen siendo muy importantes 🙂

Menú

Al ser universales, son una buena opción, para usar en los lugares, en los que palabras demasiado largas podrían desorganizarnos la estructura, por ejemplo en el menú. Si ponemos una casa, nadie dudará de que ese icono nos lleva a la página principal, la home, y nos ahorramos el espacio que la palabra «inicio» tiene. También, como ya hemos comentado, puede ser una buena opción para el contacto, donde un sobre nos indicara inequívocamente la función del botón.

Iconos sociales

Este uso está hoy en día prácticamente estandarizado. Los iconos de las redes sociales son mundialmente conocidos, por lo que no es necesario escribir el nombre completo de cada una de las redes sino que podemos sustituirlas por los iconos. Ahorramos espacio y conseguimos que el usuario de la web, no tenga que leer algo que puede describirse con una imagen.

Iconos de información del post

Cuando escribimos un articulo, normalmente al final o al comienzo del mismo, hay cierta información que nos gusta compartir con nuestros lectores. Datos tales como el numero de comentarios, el autor, la categoría… Se pueden expresar también acompañados de un icono. Este punto me gusta especialmente, pues encuentro que es un lugar en el que podemos dejar volar nuestra creatividad.

Aunque alguno de esos iconos pueden estar ya determinados, también podemos darles un aire distinto y usar algún icono más creativo, que se aproxime por la tangente al significado de la palabra que representa.

Iconos para poner énfasis a un texto

Claramente, los iconos son un genial recurso para ser la imagen principal a un post, creo que pocas dudas pueden quedar de eso ;). Pero también son un gran recurso para usar ante un texto, por el ejemplo el de un servicio, cuando estamos hablando de un portfolio.

Aunque podamos poderle un titulo al texto que acompaña, la inclusión de un icono conseguirá, que el texto hable por sí solo. De un primer vistazo sabremos de que es lo que se está hablando por lo que conseguimos un impacto visual mayor.

Bancos de iconos gratuitos

Como no podía ser de otra manera, ya que hablamos de iconos, queremos compartir con vosotros algunos bancos de iconos gratuitos desde los que podéis descargarlos y usarlos en vuestra web. Como veréis hay de varios tipos, para introducir en CSS, png, svg… Dependiendo de las necesidades que tengáis, podéis usar el formato que mejor se adapte a estas.

Font awesome

Es el mejor recurso para incluir iconos a través de CSS. El banco de iconos se ha ido ampliando a lo largo del tiempo, por lo que podemos encontrar algunos mas técnicos y otros mas creativos.

Ir a Fontawesome

Aunque se pueden incorporar el código de cualquier plantilla, algunas de nuestras plantillas para WordPress como Adriana, están adaptadas y se pueden introducir como imagen de los servicios.

 

Iconmonstr

Un buen banco de iconos que aparecen por categorías. Además podemos descargarlos tanto en png como svg, pudiendo decidir las dimensiones en la que lo necesitamos. Aunque aparecen en color negro podemos variar el color en la web, o descargarlo en formato editable.

Ir a Iconmonstr

Flaticon

Es quizá uno de los bancos de iconos gratuitos más grandes. Sin embargo, aunque son gratuitos, hay que tener en cuenta de que debemos hacer una mención a su autor.

Este banco además permite la descarga de los iconos en distintos formatos, por lo que son muy versátiles. Eso sí, todos los iconos son negros, por lo que para cambiarle el color debes ir a un editor.

Ir a FlatIcon

Esto son algunos de los bancos de iconos gratuitos más grandes, pero hay otras muchas web donde puedes descargar de forma gratuita un conjunto de iconos. Seguro que encuentras los que mejor se adaptan a tus necesidades!