Esta galeria de ícones CSS puros é o que todos os desenvolvedores front-end querem

O designer da Adobe Wenting Zhang criou um aplicativo da web interessante para gerando ícones CSS puros. É simplesmente chamado “Ícone CSS” e pode ser um dos mais legais geradores de ícone para desenvolvedores frontend.

Este projeto é completamente grátis e open-source no GitHub então você está livre para baixar e mexer com qualquer um dos códigos.

Esses ícones não tem dependências de CSS ou precisa de qualquer recurso especial do navegador. À primeira vista, pode parecer que os ícones são construídos em SVGs, mas eles são na verdade apenas divs.

Através da magia do CSS, você pode construir ícones de linha personalizada para elementos de interface comuns como o menu de hambúrgueres, o ícone de três pontos ou o ícone de impressão (entre muitos outros).

Você pode escolher entre ícones de linha fina ou ícones preenchidos escuros. Ambos utilizam propriedades CSS semelhantes e você pode até ver o que eles estão clicando em qualquer ícone na lista. Você verá um barra lateral deslizante com o código HTML e CSS junto com o ícone ampliado.

Se você olhar para o canto superior direito dos campos de código, verá um pequeno ícone de cópia. Clique para copiar automaticamente o código para sua área de transferência. Ah, e esse ícone de cópia? Também construído com o código CSS puro de Wenting.

Para mude a cor de qualquer ícone, apenas encontre o cor propriedade na classe de ícones principal. Atualizando esse cor propriedade vai mudar tudo, também.

Como esses ícones são bem simples, eles provavelmente não funcionarão em todos os sites. Mas isso é um alternativa legal para imagens ou fontes de ícones e os seus completamente grátis.

Confira a Página inicial do ícone CSS para veja mais exemplos e para copiar / editar a fonte. Você também pode testar cada ícone separadamente em CodePen se você quiser brincar com a fonte no seu navegador.