Ayuda Registrarse

We ♥ icons. Dónde encontrar iconos gratis y cómo usarlos como un ♛


Hay iconos para todo y para todos: los utilizaban los griegos y ahora lo utilizan los modernos  ♪♪ d(- -)b ♪♪. Y es que dicen mucho, sin tener nada que decir: de ahí su éxito.

 

Un par de iconos en tu web pueden dar un toque "cool" a tu página y, lo más importante, pueden hacer que a golpe de vista una visita sepa exactamente lo que se enconde detrás de él. A diferencia de la Antigua Grecia, hoy podemos encontrar iconos para tu página web gratis y mejorar su aspecto. Además de consejos sobre cómo usarlos correctamente para sacarles el mayor partido posible.


¿Por qué son importantes los iconos para el diseño web?

Los iconos (del griego: εἰκών romanización: eikōn, literalmente imagen) son una herramienta de comunicación muy poderosa, ya que indican a tus visitas de manera simple y visual de lo que trata un contenido concreto. Son como señales de tráfico, indicando a tus visitas por dónde deben ir. 

 

Un simple icono comunicará de manera más rápida lo que quieres transmitir, ya sea tu número de teléfono, ofertas, calendarios o cualquier otra idea. Un icono de un carrito de compras es universalmente reconocido, y no necesita de más explicación para comprender que se trata de la tienda. Por lo tanto, usar iconos de manera apropiada en tu web te aportará estas ventajas:

 

  • Expresivos. Tu contenido será más fácil de asimilar y más ameno de leer para tus usuarios.
  • Gran diseño. Usados correctamente estas imágenes darán a tu página un aspecto profesional.
  • Universales. Todo el mundo sabe lo que significa y su poder de comunicación es enorme.

 

En esta comparación puedes ver el gran impacto que puede tener la inclusión de iconos en tu web:

Una vez añadidos los iconos el texto cobra más sentido aunque no nos paremos a leerlo.
Una vez añadidos los iconos el texto cobra más sentido aunque no nos paremos a leerlo.
Sin iconos, esta parte de la web se ve bastante árida.
Sin iconos, esta parte de la web se ve bastante árida.

Cómo usarlos correctamente y no destruir tu página web en el intento

Hay cuatro características importantes (tamaño, lugar, color y consistencia) que debes tener en cuenta al usar iconos. Si te saltas una de una de estas reglas, tu página se verá como un Frankstein de Internet. Vamos al trapo:


  • Tamaño: debes tener mucho cuidado al configurar el tamaño de tus iconos. Asegúrate de que no son demasiado pequeños para que puedan verse, y de que no sean demasiado grandes para que no quiten protagonismo a otros elementos.
  • Lugar: usar columnas para organizar tus iconos es una gran manera de compaginarlos con texto. Dependiendo de la plantilla de tu web tus iconos se verán mejor a la izquierda, derecha, bajo el texto o sobre él. Elijas cual elijas, asegúrate de seguir siempre esa misma regla.
Coloca todos los iconos en la misma posición.
Coloca todos los iconos en la misma posición.
  • Color: intenta mantener el mismo color en todos los iconos para tener una imagen unificada, que combine con el de tu logo y los colores generales de tu página web.
  • Consistencia: elige iconos que tenga un aspecto y estilo similar. Si los mezclas el efecto será negativo, como puede observarse en esta imagen:
Si los iconos tienen distintos estilos romperás la armonía de tu web
Si los iconos tienen distintos estilos romperás la armonía de tu web

Las mejores páginas de iconos gratis (the best of the best)

Hay muchas páginas donde puedes encontrar iconos, los cuales puedes usar libremente. Hemos seleccionado algunas, indicando sus pros y contras.

Nota: Muchas de estas páginas te permiten bajar las imágenes en distintos formatos. Para obtener los mejores resultados te recomendamos bajarlas siempre en PNG.

Iconmonstr

Iconmonstr tiene cerca 3000 iconos que puedes usar libremente en tu web.

Iconmonstr tiene cerca de 3000 iconos para usar en tu página.
Iconmonstr tiene cerca de 3000 iconos para usar en tu página.

Lo que nos gusta

  • Es gratis
  • Puedes cambiar el tamaño y color del icono
  • Puedes buscar iconos por categoría

Lo que no nos gusta tanto

  • No se puede guardar el tamaño y color que eliges. Si descargas un icono de un color concreto recuerda apuntar el número y tamaño para aplicarlo al próximo icono que vayas a usar.

Flaticon.com

Flaticon.com tiene una enorme selección de iconos, agrupados por categorías.

Flaticon cuenta con una gran variedad de iconos
Flaticon cuenta con una gran variedad de iconos

Lo que nos gusta

  • Puedes buscar iconos por categorías
  • Puedes guardar iconos en la página, lo que es muy útil en tu proceso de selección
  • Puedes descargarlos en distintos tamaños

Lo que no nos gusta tanto

  • Los iconos son gratis, pero debes atribuirlos a su autor. Puedes hacer esto o bien pagar mensualmente.
  • Todos los iconos son negros. Para cambiar el color debes editarlos tú mismo usando una herramienta como Photoshop.

Flaticons.net

Flaticons.net es otro gran sitio donde encontrar y personalizar tus iconos.

Lo que nos gusta

  • Es gratis
  • Puedes cambiar el tamaño y color del icono
  • Puedes buscar iconos por categorías

Lo que no nos gusta tanto

  • Como en Iconmonstr, no puedes guardar el tamaño y color para futuros iconos

Conclusión: más vale un solo icono bien usado que ciento revoloteando

Como todo en el diseño web, los recursos hay que usuarlos "con moderación". Puedes usar uno o dos iconos de manera puntual, por ejemplo para indicar la tienda o el teléfono (pero sin perder de vista las cuatro regla que dijimos - ¿recuerdas cuáles eran?); a toda la página llena de iconos volando por tu página y puestos sin motivo y sin razón. Utilízalos sabiendo lo que haces y no haciendo las cosas por casualidad y por probar. Sólo así podrás ser un maestro Jedi.

Guillermo González

El sultán de SEO y en ocasiones traductor

ARTÍCULOS RELACIONADOS

¿Tienes 5 minutos? Prepara tu web con este workout y la dieta de la piña >> Leer más
Todo lo que necesitas saber sobre el diseño, las imágenes y el SEO >> Leer más
Página en construcción: cómo trabajar en tu página sin molestar a tus visitas >> Leer más
Claves para tener un texto legible en una web >> Leer más




Escribir comentario

Comentarios: 14
  • #1

    Ambrosio (martes, 25 agosto 2015 18:38)

    excelentes sitios para poner iconos, gracias

  • #2

    Tu Casa Propia (martes, 25 agosto 2015 19:13)

    Justo había estado necesitando algunos, para numerar el seguimiento de una misma página por ejemplo, creo que esta información me va a ser muy útil, muchas gracias como siempre.

  • #3

    Ángel (martes, 25 agosto 2015 20:40)

    Gracias por vuestros consejos.

  • #4

    María Jesús (viernes, 28 agosto 2015 18:52)

    Muchas gracias por las páginas de iconos gratuitos, les echaré un vistazo.

    Estoy de acuerdo con la coherencia en imágenes en cualquier soporte es importantísimo; no son pocas las páginas web que me encuentro con iconos dispares que nada tienen que ver con la identidad o tipo de contenido de la página.

    ¡Enhorabuena por el blog y el artículo! ;) Me parecen contenidos prácticos y fáciles de entender por cualquier tipo de público, no solo del gremio de publicidad o diseño web.

  • #5

    RgR (domingo, 30 agosto 2015 13:18)

    Gracias por vuestras recomendaciones. Un artículo muy interesante :)

  • #6

    alejandro (viernes, 04 septiembre 2015 01:22)

    gracias información muy útil

  • #7

    Santos (lunes, 07 septiembre 2015)

    Sinceramente estos recursos hacen que tu web sea única y exclusiva ...

    Sois innovadores y actuales, enhorabuena

  • #8

    Yuletsy Pacheco (miércoles, 09 septiembre 2015 00:53)

    La gira

  • #9

    Esther Chavez (martes, 15 septiembre 2015 14:56)

    Hola

  • #10

    Lolo (martes, 22 septiembre 2015 18:10)

    Me parece como siempre algo muy interesante, no solo por lo que se puede hacer sino tambien por la forma como lo explican. Un saludo

  • #11

    Raúl (viernes, 25 septiembre 2015 00:23)

    gracias por los consejos

  • #12

    Alberto Poblete Santos (jueves, 01 octubre 2015 23:09)

    NUMESETE

  • #13

    aby (martes, 06 octubre 2015 04:05)

    hola soy aby del grupo 102

  • #14

    www.tuappabajocoste.com (jueves, 08 octubre 2015 23:35)

    muy util gracias.