Um site de ecommerce funcional e com boa navegação depende muito da rápida identificação dos seus ícones. Essa postagem tem o objetivo de listar as 10 melhores bibliotecas de ícones de código aberto com base no segmento do Reddit.
Esteja ciente de que todas as bibliotecas listadas abaixo são completamente de código aberto, verificamos os termos e condições da licença. Outra condição para as bibliotecas abaixo é que elas precisam ter um design moderno e atualizado. Então vamos começar:
1. Font Awesome
Font Awesome – foi uma das primeiras bibliotecas de ícones de código aberto populares a serem lançadas. Atualmente, eles têm um total de 1.588 ícones gratuitos e 7.842 ícones profissionais em sua galeria.
2. Ionicons
O Ionicons.io é uma biblioteca de ícones de código aberto alimentada por SVG, com 457 ícones independentes com três estilos diferentes: estrutura de tópicos, preenchimento e nitidez.
O uso de ionicons está bem documentado e, se você quiser usar a biblioteca inteira, em vez de apenas SVGs independentes, poderá incluir o seguinte script no rodapé:
<script src=”https://unpkg.com/ionicons@5.0.0/dist/ionicons.js”></script>
Depois, basta adicionar o seguinte elemento no seu modelo HTML e alterar o nameatributo para corresponder ao ícone que você deseja mostrar assim:
<ion-icon name=”heart”></ion-icon>
3. CSS.gg
A comunidade dev no Reddit, tem uma nova biblioteca de ícones sendo lançada, que usa apenas CSS para estilos. Atualmente, possui mais de 704 ícones independentes, com base em categorias como alertas, setas, código, design e muito mais.
A introdução do CSS.gg é tão fácil quanto executar um npm -i css.ggcomando e, posteriormente, incluir a seguinte folha de estilo dentro da tag head:
<link href=’https://css.gg/css’ rel=’stylesheet’>
Obviamente, também existem alternativas à CDN, como o UNPKG ou o JSDelivr, como este:
<!– UNPKG –>
<link href=’https://unpkg.com/css.gg/icons/all.css’ rel=’stylesheet’>
<!– JSDelivr –>
<link href=’https://cdn.jsdelivr.net/npm/css.gg/icons/all.css’ rel=’stylesheet’>
4. Feathericons
Feathericons é uma biblioteca de conjuntos muito bonita e limpa, com 282 ícones SVG. Por padrão, ele vem apenas com o SVG como formato principal por ser mais rápida.
5. Eva Icons
O Eva Icons é um conjunto de 480 ícones de código aberto lindamente criados, servidos no formato SVG e PNG. Existem dois estilos principais, delineados e preenchidos.
Para começar com o Eva Icons é fácil fazer o download do arquivo SVG ou PNG depois de selecionar o ícone de uso ou fazer o download de todo o conjunto de ícones. Você também pode incluir o Eva Icons instalando o pacote NPM assim:
npm i eva-icons
https://akveo.github.io/eva-icons/#/
6. Heroicon
Heroicons é uma incrível biblioteca de ícones de código aberto feita pelos criadores do CSS Tailwind. Possui mais de 165 ícones independentes com um estilo de preenchimento e contorno, mas também oferece uma versão em preto e branco de cada elemento.
A introdução desses ícones é tão fácil quanto clicar em um dos ícones e copiar o código SVG embutido que você pode usar imediatamente em seus projetos. Eeles também oferecem a biblioteca em Figma. Se você deseja incluir todos os ícones, pode baixar todos os arquivos SVG do repositório público.
7. Remix Ícone
Remix Icon é uma grande coleção de belos ícones de código aberto 2149 sob a Licença Apache. Existem várias categorias de ícones para escolher, como negócios, comunicação, finanças, mapa e muito mais.
Para começar a usar o Remix Icon, é muito fácil baixar a versão SVG ou PNG ou copiar diretamente para a área de transferência o código SVG embutido. Como alternativa, você também pode optar por baixar o pacote inteiro como arquivos .svg únicos ou como um arquivo sprite SVG.
8. Octicons
Octicons é um conjunto de mais de 100 ícones de código aberto que o Github também usa em seu site principal. Aparentemente, eles já estão trabalhando em uma segunda versão da biblioteca, melhorando o design e a variedade de ícones.
Uma grande vantagem do Octicons é o fato de que você também pode obtê-lo como um pacote pronto para uso em React, Ruby, Rails, Jekyll e Javascript. Aqui estão todos os pacotes que você pode usar para começar a trabalhar com o Octicons.
https://primer.style/octicons/
9. Ikonate
O o Ikonate é outra incrível biblioteca de ícones de código aberto, com cerca de 100 ícones premium baseados em design plano. É generosamente licenciado sob a licença muito permissiva do MIT.
Você pode configurar facilmente o tamanho, largura da borda, tampa e cantos da borda e cor dos ícones antes de exportar. No arquivo ZIP de exportação, você obterá um arquivo html com todos os ícones embutidos selecionados, também uma pasta com arquivos SVG separados e uma planilha de sprites.
Para concluir, apoie essas bibliotecas, dando-lhes uma estrela no Github e informando-as sobre o trabalho incrível que fizeram. Considere compartilhar esta lista com seus amigos ou colegas se você ainda não decidiu usar uma biblioteca de ícones específica para o seu próximo projeto.
