Iconos gratis: Mega colección de recursos

Descargar iconos online
Si te parece interesante... ¬°comp√°rtelo!

Los iconos gratis (o de pago) se han convertido en¬†¬†imprescindibles en el mundo del dise√Īo ya que permiten ofrecer una experiencia m√°s visual al usuario.

Te compartimos recursos muy interesantes para que saques máximo partido al uso de este elemento visual en tus proyectos.

A lo largo de este artículo descubrirás herramientas y programas para facilitarte la tarea de encontrar iconos gratis y de calidad tanto para web como para impresión.

Pero antes, te recomendamos seguir unas pautas antes de escoger tus favoritos que te servir√°n para ahorrarte mucho tiempo.

¬°Seguro que hay alg√ļn punto que no conoc√≠as!

Las ventajas de utilizar iconos gratis en tus dise√Īos

Pero antes de nada, te recuerdo algunas ventajas de a√Īadir iconos gratis a tus dise√Īos ya que podr√≠a aportarte m√ļltiples beneficios a tu proyecto.

Uno de los puntos más importantes que deberíamos de tener en cuenta a la hora de presentar nuestro contenido es la experiencia de usuario.

Este elemento es, sin duda, una herramienta muy potente y eficaz ya que permite digerir f√°cilmente el contenido de forma visual sin mucho esfuerzo.

Este tipo de elemento visual aporta numerosos beneficios como:

  • Destacar textos de un contenido (t√≠tulos, listas etc)
  • Conseguir un dise√Īo m√°s profesional y original: un dise√Īo solo con textos puede ser demasiado soso y simple.
  • Crear llamadas a la acci√≥n (CTAs) llamativas
  • Complementar documentos (informes, curr√≠culums etc)
  • Ofrecer una lectura m√°s escaneable y amena al usuario

Cómo utilizar iconos gratis (o de pago) en tus proyectos

Los iconos se pueden a√Īadir a cualquier proyecto creativo como en sitios webs, aplicaciones m√≥vil y documentos o productos impresos como flyers.

Te dejo algunos ejemplos de inspiración sobre su uso que te pueden servir:

Sitios web (tiendas, blogs, landings etc)

Sitio web con iconos

Si navegas mucho por Internet, te encontrar√°s sitios webs con iconos gratis en los men√ļs, para destacar t√≠tulos o para complementar otros elementos del dise√Īo.

En este ejemplo, el dise√Īador ha utilizado iconos con un estilo moderno y llamativo para destacar los diferentes servicios que se ofrecen.

Apps móvil (interfaz de usuario / UI)

App móvil con iconos

La verdad es que no he visto ninguna app m√≥vil que no incluya iconos en su dise√Īo.

En el mundo de las apps, los iconos son uno de los elementos m√°s utilizados.

Se utilizan sobretodo como men√ļs visuales, para navegar de una pantalla a la otra.

Documentos (PDFs, currículums, facturas etc)

Currículum con iconos

Un documento impreso sin im√°genes puede llegar a ser muy aburrido y soso, sobretodo si contiene mucho texto.

En el currículum de la imagen, los iconos complementan algunos detalles importantes como las formas de contacto.

Como has visto, su uso es muy extenso, ¡y no tiene limites!

Ahora que has visto las posibilidades de este gran elemento visual, te comparto todos los tipos de iconos que existen.

Tipos de iconos que existen en Internet

En internet se puede encontrar millones de iconos de todo tipo de categor√≠as, formatos y tama√Īos.

También podemos encontrar iconos para diferentes aplicaciones como web, app e impresión.

Categorías más populares

  • Redes sociales

    Iconos gratis de redes sociales
  • Servicios / negocios

    Iconos gratis de servicios
  • Formas de contacto

    Iconos gratis de formas de contacto
  • Interfaz de usuario

    Iconos gratis de interfaz usuario

Formatos de descarga

  • PNG: para guardar el icono con un fondo transparente, desc√°rgatelo en formato .png, de lo contrario, se te guardar√° con un fondo en blanco. Si la zona del dise√Īo donde quieres a√Īadir el icono es de color blanco, no importa mucho.
  • JPG: si tu icono tienen un fondo de color, puedes guardarlos en formato .jpg. Este formato es uno de los formato m√°s utilizados en el mundo de los iconos.
  • EPS: en el caso que quisieras modificar¬†un icono parcial o completamente, este formato te permite hacerlo utilizando programas como Photoshop, Illustrator, InDesign y QuarkXpress entre otros.
  • Webfont: los iconos basados en fuentes web son principalmente aplicados a dise√Īos web como p√°ginas corporativas, blogs, tiendas online etc. Se trata de un formato que permite a√Īadir iconos utilizando CSS.
  • SVG: un formato poco conocido pero muy √ļtil para uso online ya que es flexible, es decir, permite que los iconos mantengan su alta calidad sin importar la resoluci√≥n de la pantalla al contrario de los JPGs o PNGs.

Estilos que están muy de moda

Dibujos / ilustraciones

Iconos de dibujos / ilustraciones

Pictogramas

Iconos pictogramas

Bicolor

Iconos bicolor

Con degradado

Iconos con degradado

Con sombras

Iconos con sombras

Monocolor

Iconos monocolor

Con relleno

Iconos con relleno

Pixel

Iconos pixel

Lineales

Iconos lineales

Flat

Iconos flat

Circulares

Iconos circulares

Aspectos a considerar antes de utilizar iconos gratis o de pago

Uno de los errores que muchos cometen a la hora de utilizar iconos gratis en sus dise√Īos es no tener en cuenta ciertos aspectos del icono ya que el mal uso del mismo podr√≠a da√Īar la imagen del dise√Īo.

Vamos a repasar 5 aspectos importantes que todo usuario debería considerar:

Estilo

Debemos tener en cuenta el estilo del icono que vayamos a escoger para que todo respire al mismo aire y no rompa con el dise√Īo del contenido. Un estilo puede ser flat, vintage, pixel, dibujos…

Color

Es importante seguir la paleta de colores de nuestra marca o utilizar un color neutro (negro o blanco) para mantener el mismo estilo por todo el dise√Īo.

Peso

Antes de a√Īadir el icono a nuestro dise√Īo, nos tenemos que asegurar que pese lo menos posible para no afectar nuestra web (que cargue lento) o nuestro documento (que tarde mucho en abrir).

Tama√Īo

Ni muy peque√Īo, ni muy grande, sino un tama√Īo ideal que ayuda a destacar otro elemento sin tener que ocupar mucho espacio en el dise√Īo.

Estoy segura que empleando siguiendo estas pautas te ayudar√° a ahorrar tiempo en la elaboraci√≥n de tu dise√Īo.

Sitios web para descargar iconos gratis y premium

¬°Es hora de liberar tu creatividad!

Aquí van algunas de las mejores páginas web para descargar miles de iconos gratis y premium para cualquier aplicación:

Flaticon

Flaticon

Esta es sin duda una de mis webs favoritas y a la que acudo cada vez que necesito iconos gratis para mis proyectos.

Flaticon es una increíble librería de iconos gratis en formatos PNG, PSD, SVG, EPS y webfont.

Los iconos son completamente personalizables; puedes escoger color, tama√Īo y formato antes de descargarte el icono.

Desde sus inicios en 2013, Flaticon ya cuenta con m√°s de 1.2 millones de iconos en total.

¬°Y el n√ļmero de descargas ya ni te cuento!

Adem√°s… ¬Ņsabias que Flaticon pertenece a Freepik, la empresa malague√Īa especializada en recursos gr√°ficos de todo tipo?

Font Awesome

Font Awesome

Es muy probable que hayas o√≠do hablar acerca de Font Awesome si est√°s metido en el mundo del dise√Īo.

Personalmente, es el recurso n√ļmero uno que utilizo para a√Īadir iconos a mis proyectos web.

Esta librería cuenta con más de mil iconos gratis y está disponible tanto en formato webfont como SVG.

Adem√°s, existen hasta plugins de WordPress para a√Īadir estos iconos a tu web y hacerte la vida m√°s f√°cil.

Icons8

iconos planos gratuitos

Te puedes descargar los iconos en formato PNG, SVG, EPS y PDF y en el tama√Īo exacto que necesites.

Si eres dise√Īador de interfaces o desarrollador web, ofrece varios servicios online para facilitarte el trabajo.

Adem√°s de esta web, Icons8 tiene 7 webs m√°s (muy interesantes) relacionadas con el mundo de los iconos.

IconFinder

IconFinder - editor online de iconos gratis

Lo que más me ha llamado la atención de IconFinder es su editor de iconos online.

El editor te abre el archivo vector que te permite modificarlo a tu gusto: colores, tama√Īos, elementos etc.

Adem√°s, puedes hacerlo m√°s √ļnico a√Īadiendo tus propios elementos al icono.

Y si eres dise√Īador, puedes incluso ganar dinero dise√Īando iconos.

1001 Free Downloads

iconos 3D gratis

1001 Free Downloads presenta sets de iconos realmente originales, tanto flat como esqueumórficos (3D).

Good Stuff No Nonsense

Como su nombre indica, en Good Stuff No Nonsense encontrar√°s solo buen material ūüėČ concretamente, fant√°sticos iconos vectoriales gratuitos en formatos SVG y PNG, dibujados a mano. ¬°No te los pierdas!

Iconshock

packs de iconos tem√°ticos gratuitos

En Iconshock encontrar√°s miles de originales packs de iconos tem√°ticos gratuitos (¬°y con la cuenta premium tendr√°s acceso a m√°s de dos millones de iconos!)

Freepik

Freepik

No podría haber completado esta lista sin incluir a Freepik.

Esta increíble librería de recursos gráficos ofrece iconos para descargar en PNG, EPS y SVG.

Puedes utilizarlos tanto en tus proyectos personales como en tus proyectos comerciales.

Si eres dise√Īador, Freepik te ayudar√° mucho a la hora de encontrar im√°genes, vectores y gr√°ficos para tus dise√Īos.

Y para ahorrarte mil horas buscando iconos, te comparto algunas herramientas online para simplificar ese proceso.

Plugins para a√Īadir iconos gratis a tu web WordPress

¬ŅTienes una web en WordPress y sueles utilizarlos muy a menudo? Entonces te recomiendo utilizar un plugin.

Con los plugins que te voy a compartir a continuaci√≥n, podr√°s buscar y a√Īadir iconos a tu web en segundos.

Better Font Awesome

Better Font Awesome

Este plugin te permite integrar todos los elementos de Font Awesome desde tu sitio WordPress.

Better Font Awesome autom√°ticamente te incluye su √ļltima versi√≥n para estar siempre actualizado.

Adem√°s incluye el CSS, atajos (shortcodes) y un generador de iconos desde el editor TinyMCE.

Descarga el plugin de WordPress aquí.

WP SVG Icons

WP SVG Icons

Si quieres utilizar tus propios iconos, el plugin WP SVG Icons te permitie hacer eso con su importador de iconos.

También puedes utilizar los más de 450 iconos de IcoMoon en tu proyecto web si lo prefieres.

¬ŅQuieres a√Īadir iconos a tus posts, p√°ginas o al sidebar? Gracias a los shortcodes, no tendr√°s ning√ļn problema.

Descarga el plugin de WordPress aquí.

Menu Icons by ThemeIsle

Custom Icons for Elementor

Dise√Īa un men√ļ m√°s visual a√Īadiendo iconos personalizados a tus enlaces de navegaci√≥n.

Este plugin por ThemeIsle te ofrece miles de iconos gratuitos sin salir de tu web.

Puedes ajustar la posici√≥n y la medido del icono seg√ļn tus necesides sin tocar c√≥digo.

Descarga el plugin de WordPress aquí.

Existen otros plugins pero estos son los que nos han llamado la atención.

El uso de los emojis o iconos gratis de redes sociales

Los emojis se han convertido en uno de los elementos m√°s utilizados online, y no s√≥lo para enviar mensajes por chat, sino tambi√©n para destacar o complementar ciertos elementos de una web, como CTAs, men√ļs, t√≠tulos etc.

Desde hace tiempo, profesionales emplean el uso de los emojis en campa√Īas de marketing para aumentar las conversiones.

Sitios webs populares de emojis

Aquí tienes algunas webs interesantes para copiar y pegar emojis en redes sociales como Facebook, Twitter e Instagram.

Emojis Para Twitter

Emojis Para Twitter

Esta es la web de emojis que m√°s utilizo pero existen muchas m√°s como:

Extensi√≥n Chrome para a√Īadir emojis

Mogicons

Mogicons

Con la extensión Chrome de Mogicons podrás insertar emojis en Facebook (publicaciones, comentarios etc) con un solo click.

Descárgate Mogicons para Chrome aquí

El uso de iconos gratis o de pago en productos impresos

Por finalizar este art√≠culo, queremos recordaros que los iconos tambi√©n se pueden utilizar de manera “offline“.

En la web de nuestra imprenta online, podréis descargar varias plantillas de tarjetas de visita con iconos para Illustrator e InDesign.

Pack de 6 plantillas de tarjetas de visita para Illustrator

Pack de 6 plantillas de tarjetas de visita para Illustrator

Pack de 6 plantillas de tarjetas de visita para InDesign

Pack de 6 plantillas de tarjetas de visita para InDesign

Bueno, creo que eso es todo… ¬°ha llegado el f√≠n de esta mega colecci√≥n de recursos para iconos!

Sin embargo, iremos actualizando este artículo a medida que vayan surgiendo cambios.

Y a ti, ¬Ņqu√© webs de iconos gratis te gustan m√°s? ¬Ņen qu√© formato los utilizas? ¬Ņqu√© estilo prefieres?

¡Cuéntanoslo en los comentarios y comparte este post en redes sociales!

Si te parece interesante... ¬°comp√°rtelo!