Iconos oficiales de Google para la web, para copiar o descargar
Los iconos más populares de Material Icons, la librería de Google en formatos SVG y PNG, para usar libremente en cualquier proyecto, organizados en varias categorías. Como usar las imágenes en documentos o en un sitio web.
En esta página tratamos de mostrar los iconos más populares de los creados por Google, para usar en las páginas web, que pertenecen a la colección de "Material Icons".
Son solo alrededor de 100, ya que la colección completa supera los 900, casi imposible de representar en un solo artículo.
Son iconos minimalistas que usan el llamado diseño plano (flat), creados con el fin de consumir pocos recursos y al mismo tiempo representar los temas más demandados de forma gráfica.
Son modernos, sencillos, amigables, fácilmente legibles y optimizados para verse claramente en cualquier dispositivo.
Muchos de ellos los usamos nosotros en nuestro sitio para crear gráficos e imágenes y amenizar y representar el contenido de los artículos.
Les hemos dado color a todos para hacerlos más atractivos.
Material Icons, iconos libres de Google para la web
Material Icons es la colección de iconos oficiales creados por Google, teniendo en cuenta sus especificaciones y guía de diseño, para ser usados en la web.
La colección completa está disponible de forma gratis y libre para su uso en cualquier plataforma o proyecto. Para aplicaciones de desarrolladores, para diseñadores, sitios web o para cualquier persona.
Los iconos se pueden obtener o mostrar de varias formas:
- Mostrándolos en las páginas de un sitio web, cargando la fuente Material Icons desde Google Fonts o sirviéndola desde nuestro propio servidor.
- Descargando la Librería de "Material Icons" para explorarla manualmente, que contiene todos los iconos en distintas medidas y formatos como SVG y PNG y para sistemas operativos iOS y Android.
En el paquete de "Material Icons" los iconos (más de 900), están organizados en las siguientes categorías: action, alert, av, communication, content, device, hardware, navigation, places, social y muchas otras.
Todos los iconos son imágenes vectoriales que se pueden escalar a cualquier tamaño sin perder la resolución y darles cualquier color usando CSS.
Cada categoría incluye iconos en diferentes formatos y medidas y abundante explicación técnica para desarrolladores.
Lee más información detallada en la Guía de Material Icons
En este artículo promocionamos esta iniciativa de Google poca conocida.
Mostramos para nuestros lectores aficionados los iconos más populares, con el objetivo que puedan usarlos fácilmente en sus propios proyectos.
Para eso usamos imágenes SVG para acelerar el renderizado y carga de la página y también un paquete de iconos para descargar.
Iconos sociales
Iconos de indicación y señales
Iconos de comunicacion
Iconos de hardware, equipos y dispositivos
Iconos de audio y video
Iconos de contenido
Iconos de archivos
Iconos de transporte y lugares
Iconos varios
Es muy importante para los desarrolladores y para todos los que poseemos un blog o sitio web, estos recursos de Google, porque hace innecesario tener que acudir a otros servicios en busca de iconos para nuestros proyectos, los que generalmente exigen un enlace a cambio.
Después de explorar las colecciones de otros sitios populares en la red, comprobaremos irónicamente, que todos los iconos libres de Google están incluidos en las mismas.
Cambiar el tamaño o el color de los iconos SVG
Los que deseen usar algunos de estos icono es su sitio web, pueden copiar el código e impregnarlo en el HTML de cualquier página.
Para escalarlos o cambiar el tamaño, sin perder la resolución, pueden encerrarlos en un contenedor DIV y con CSS especificar la dimensión deseada.
Por ejemplo:
Para cambiar el color solo es necesario especificar el valor del color deseado en la etiqueta "fill".
Por ejemplo:
fill="#ff0000" o fill="red"
Para guardar los iconos en formato SVG, se puede usar la opción del navegador "Guardar imagen como..."