Colección gratuita de más de 6.200 iconos SVG con licencia MIT, diseñados en una cuadrícula de 24x24, con paquetes para React, Vue, Svelte, Angular y más.
22,4 mil1,2 milJavaScriptMITActualizado hace 4 horas
google/material-design-icons
Conjuntos oficiales de iconos de Material Design de Google (Material Symbols y los clásicos Material Icons) en formatos SVG, fuente de iconos, Android e iOS.
Alternativa open source a:Font Awesome
- Estrellas
- 54,135
- Forks
- 9,748
- Issues abiertos
- 429
- Último commit
- hace 12 días
¿Qué es?
Este repositorio contiene los iconos oficiales de Material Design de Google en dos conjuntos. Material Symbols, presentado en 2022, es el conjunto actual y se distribuye como fuentes variables con ejes ajustables de tamaño óptico, grosor, grado y relleno. Material Icons es el conjunto clásico, disponible en los estilos outlined, filled, rounded, sharp y two-tone, y ya no recibe actualizaciones.
El repositorio ofrece los iconos en formatos SVG, PNG, fuentes web (WOFF2 y formatos relacionados) y recursos para Android e iOS. Los desarrolladores pueden enlazar las fuentes alojadas en Google Fonts o usar directamente los archivos generados en un proyecto. También se enumeran paquetes npm de terceros de la comunidad creados a partir de estos iconos, aunque Google no los mantiene ni los verifica.
Los iconos se distribuyen bajo la licencia Apache 2.0 y están diseñados para seguir las directrices de Material Design.
Funciones clave
- 01Dos conjuntos de iconos: Material Symbols (actual, fuente variable) y Material Icons (clásico, ya no recibe actualizaciones).
- 02Material Symbols ofrece ejes ajustables de tamaño óptico, grosor, grado y relleno.
- 03Material Icons incluye los estilos outlined, filled, rounded, sharp y two-tone.
- 04Ofrece formatos SVG, PNG, fuente web, Android e iOS.
- 05Se pueden usar mediante enlaces a Google Fonts o con archivos descargados.
Casos de uso
- Añadir un conjunto de iconos uniforme a la interfaz de una aplicación web.
- Usar fuentes de iconos en un sitio web mediante una clase CSS o un enlace a Google Fonts.
- Incluir iconos con el estilo de Material en aplicaciones para Android o iOS.
- Personalizar el grosor o el estado de relleno de los iconos con la configuración de fuentes variables en CSS.
Inicio rápido
- 1
Abre el explorador de iconos de Material Symbols y elige iconos
- 2
Instala el paquete npm de la comunidad para iconos SVG
npm install @material-design-icons/svg - 3
O enlaza la fuente web de Google Fonts en tu HTML
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
Antes de usarlo
- Material Icons ya no se actualiza, por lo que los iconos nuevos solo aparecen en Material Symbols.
- Los paquetes npm los mantiene un tercero, no Google.
Temas
Preguntas frecuentes
- ¿Qué es material-design-icons?
- Conjuntos oficiales de iconos de Material Design de Google (Material Symbols y los clásicos Material Icons) en formatos SVG, fuente de iconos, Android e iOS. Este repositorio contiene los iconos oficiales de Material Design de Google en dos conjuntos. Material Symbols, presentado en 2022, es el conjunto actual y se distribuye como fuentes variables con ejes ajustables de tamaño óptico, grosor, grado y relleno. Material Icons es el conjunto clásico, disponible en los estilos outlined, filled, rounded, sharp y two-tone, y ya no recibe actualizaciones.
- ¿material-design-icons es gratuito? ¿Qué licencia tiene?
- material-design-icons es open source bajo la licencia Apache-2.0. Revisa los términos de la licencia antes de usarlo en productos comerciales.
- ¿material-design-icons sigue mantenido?
- Mantenimiento activo. El último commit de material-design-icons fue el 9 oct 2026.
- ¿Para qué puedo usar material-design-icons?
- Añadir un conjunto de iconos uniforme a la interfaz de una aplicación web. Usar fuentes de iconos en un sitio web mediante una clase CSS o un enlace a Google Fonts. Incluir iconos con el estilo de Material en aplicaciones para Android o iOS. Personalizar el grosor o el estado de relleno de los iconos con la configuración de fuentes variables en CSS.
- ¿Cómo se instala material-design-icons?
- Abre el explorador de iconos de Material Symbols y elige iconos Instala el paquete npm de la comunidad para iconos SVG: npm install @material-design-icons/svg O enlaza la fuente web de Google Fonts en tu HTML: <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
- ¿Dónde consigo material-design-icons?
- El código fuente y las instrucciones de instalación están en GitHub: https://github.com/google/material-design-icons
Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.
Proyectos relacionados
Framework de componentes de interfaz de usuario con Material Design para Vue, con componentes responsivos hechos a mano para crear aplicaciones web.
41 mil7,1 milTypeScriptOtherActualizado hace 5 horas
Framework de Vue.js para crear SPAs, sitios SSR/SSG, PWAs, extensiones de navegador y aplicaciones móviles y de Electron con una sola base de código.
27,2 mil3,7 milJavaScriptMITActualizado anteayer
SDK de código abierto de Google para crear aplicaciones móviles, web y de escritorio compiladas de forma nativa a partir de una única base de código Dart.
180,3 mil34 milDartBSD-3-ClauseActualizado hace 3 horas
Framework para crear aplicaciones nativas de Android e iOS con React, cuya interfaz en JavaScript se renderiza con componentes nativos de cada plataforma.
126,7 mil25,4 milC++MITActualizado hace 4 horas
Herramienta de línea de comandos en Ruby que automatiza la compilación de apps iOS y Android, las capturas de pantalla, la firma de código y las publicaciones en tiendas.
42,3 mil6 milRubyMITActualizado hace 4 horas