Ícones Material
51.443 ícones SVG grátis e de código aberto em 6 coleções de ícones Material. As maiores são Material Symbols Light, Material Symbols e Google Material Icons. Abra uma coleção para ver os ícones, conferir a licença e copiar o código SVG, React, Vue ou CSS.
Coleções de ícones Material (6)
Sobre os ícones Material
Os ícones Material seguem as diretrizes do Material Design do Google: formas geométricas em uma grade de 24px, com variantes preenchidas, contornadas, arredondadas e retas que combinam naturalmente com apps Android, painéis e aplicações web feitas com Material UI ou Angular Material.
O Iconyz reúne 51.443 ícones Material de 6 coleções. As maiores são Material Symbols Light, Material Symbols e Google Material Icons. Todas são monocromáticas, então cada ícone assume a cor do texto ao redor (currentColor) e pode ter a cor alterada com CSS.
As licenças variam de coleção para coleção: 6 podem ser usadas comercialmente sem atribuição. A tabela abaixo resume as licenças; a página de cada coleção tem link para a licença completa.
Licenças dos ícones Material
| Licença | Coleções de ícones | Uso comercial | Atribuição |
|---|---|---|---|
| Apache-2.0 | 4 | Sim | Não exigida |
| MIT | 1 | Sim | Não exigida |
| OFL-1.1 | 1 | Sim | Não exigida |
Este é um resumo, não uma orientação jurídica. Leia nosso guia de licenças de ícones e a licença indicada na página de cada coleção.
Perguntas frequentes sobre ícones Material
Os Ícones Material são grátis para uso comercial?
A maioria sim, mas depende da coleção. 6 das 6 coleções de ícones Material permitem uso comercial sem atribuição (Apache-2.0, MIT, OFL-1.1).
Qual coleção de ícones Material tem mais ícones?
Material Symbols Light é a maior, com 15.802 ícones. Coleções maiores têm mais chance de ter todos os ícones de que você precisa, o que mantém sua interface visualmente consistente.
Como usar os Ícones Material em React, Vue ou HTML?
Abra qualquer ícone e copie o código como SVG, JSX para React ou Solid, componente Vue ou Svelte, Astro ou CSS, ou baixe em SVG ou PNG. Você também pode usar um ícone direto no HTML com uma tag <img> apontando para a URL do SVG.
Posso mudar a cor dos Ícones Material?
Sim, nas coleções monocromáticas. O código SVG delas usa currentColor, então ícones inline seguem a cor CSS do elemento pai. Ao usar um ícone como imagem, adicione ?color=%23RRGGBB à URL do SVG. Ícones multicoloridos mantêm as cores originais.
Outras categorias de ícones
Emoji (11) Bandeiras e mapas (12) Logotipos (18) Programação (11) Temáticos (9) Interface 16px / 32px (18) Interface 24px (65) Interface multicolorida (12) Interface com outras grades (35) Arquivo sem manutenção (30) Sem categoria (16)