Aguarde...

10 de maio de 2020

10 bibliotecas de ícones SVG de código aberto que você pode usar para o seu próximo projeto

10 bibliotecas de ícones SVG de código aberto que você pode usar para o seu próximo projeto

Na semana passada, iniciei um tópico no reddit, fazendo uma pergunta simples a outros desenvolvedores: qual é a sua biblioteca de ícones favorita? A publicação rapidamente se tornou popular e eu descobri muitas outras incríveis bibliotecas de ícones de código aberto que eu nunca ouvi falar. Decidi criar uma postagem no blog listando as 10 melhores bibliotecas de ícones de código aberto com base no segmento do Reddit.

10 bibliotecas de ícones SVG de código aberto que você pode usar para o seu próximo projeto

Esteja ciente de que todas as bibliotecas listadas abaixo são completamente de código aberto, pois verifiquei 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:

Font Awesome

Acredito que a maioria de nós já usou ícones Font Awesome pelo menos uma vez até agora, pois foi uma das primeiras bibliotecas de ícones de código aberto altamente populares a serem lançadas. No momento, eles têm um total de 1.588 ícones gratuitos e 7.842 ícones profissionais em sua galeria.

10 bibliotecas de ícones SVG de código aberto que você pode usar para o seu próximo projeto

Provavelmente, uma das principais razões pelas quais o Font Awesome ainda está sendo amplamente utilizado é por causa da enorme coleção de vários ícones que eles têm a oferecer. Na verdade, nosso site usa os ícones duotônicos do Font Awesome Pro e acreditamos que ele se destaca um pouco mais em comparação com outros sites semelhantes.

Outro recurso interessante que o Font Awesome tem a oferecer é um link CDN personalizado que você pode gerar se criar uma conta. Ao fazer isso, você pode excluir condicionalmente ícones regulares, mas usar apenas os duotônicos.

É claro que você também pode optar por incluir apenas alguns ícones, copiando e colando o código SVG diretamente, o que eu recomendo se você não usar mais de 20 a 30 ícones no seu site.

Concluindo, existem várias maneiras de usar o Font Awesome, como copiar a fonte SVG de um único ícone, fazer o download da biblioteca ou usar uma CDN pública ou própria. Eles têm uma ótima página para ajudar você a começar com o Font Awesome .

Ionicons

O Ionicons.io é outra 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. Gosto particularmente de como o design dos contornos e formas é limpo e direto. Eu recomendaria definitivamente experimentá-lo para o seu próximo projeto.

10 bibliotecas de ícones SVG de código aberto que você pode usar para o seu próximo projeto

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>
  

Você pode ler mais sobre o uso básico no site oficial.

CSS.gg

Se você é um membro ativo da comunidade dev no Reddit, talvez tenha notado 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.

10 bibliotecas de ícones SVG de código aberto que você pode usar para o seu próximo projeto

Houve alguns debates sobre se é melhor usar CSS ou SVG em termos de desempenho, mas o criador da biblioteca @astritmalsija mais tarde lançou os formatos SVG, SVG Sprite, Figma e Adobe XD para a versão 2 para oferecer uma ampla gama de implementações.

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'>
  

Você pode ler mais sobre como começar com CSS.gg sobre oficiais do compromissadas recebendo instruções iniciados .

Feathericons

Feathericons é outra biblioteca de conjuntos muito bonita e limpa, com 282 ícones SVG. Por padrão, ele vem apenas com o SVG como formato principal, mas tudo bem, porque agora é a maneira recomendada de usar ícones, pois é a mais rápida.

10 bibliotecas de ícones SVG de código aberto que você pode usar para o seu próximo projeto

Gosto que você possa configurar o tamanho, a largura do traço e a cor dos ícones antes de baixá-los. Você também pode alternar entre o modo escuro e claro clicando no ícone da lua no canto superior direito do site.

Começar a usar o Feathericons é tão fácil quanto baixar um arquivo SVG e incluí-lo na sua marcação usando um srcou usando-o como um objeto SVG embutido.

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, e eu adoro o fato de que você pode selecionar animações prontas para aplicar zoom, pulsar ou agitar ao passar o mouse.

10 bibliotecas de ícones SVG de código aberto que você pode usar para o seu próximo projeto

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
  

Heroicon

Heroicons é outra incrível biblioteca de ícones de código aberto criada 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 aparência dos ícones é muito premium e bem trabalhada.

10 bibliotecas de ícones SVG de código aberto que você pode usar para o seu próximo projeto

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. Eu gosto do fato de que eles 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.

Ícones de inicialização

Algumas semanas atrás, escrevi sobre os novos ícones do Bootstrap 5 comparando-os ao Font Awesome. Atualmente, possui mais de 600 ícones personalizados SVG e acho que se destaca em termos de design. Se você gosta de usar o Bootstrap como uma estrutura CSS, considere realmente usar o Bootstrap 5 Icons para o seu próximo projeto.

10 bibliotecas de ícones SVG de código aberto que você pode usar para o seu próximo projeto

A introdução aos ícones do Bootstrap 5 é tão fácil quanto copiar o código SVG e, em seguida, você pode usá-lo da maneira que achar melhor, seja usando-o em linha, incluindo-o como fonte de uma imagem ou criando classes de pseudo-código em CSS. De qualquer maneira, o site explica claramente os métodos de implementação.

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. Definitivamente vale a pena dar uma olhada.

10 bibliotecas de ícones SVG de código aberto que você pode usar para o seu próximo projeto

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.

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.

10 bibliotecas de ícones SVG de código aberto que você pode usar para o seu próximo projeto

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.

Ikonate

Por fim, mas não menos importante, 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.

10 bibliotecas de ícones SVG de código aberto que você pode usar para o seu próximo projeto

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.

Postado em Blog
Escreva um comentário