← Voltar aos ícones

Ícones Feather

O Feather é um pequeno conjunto de código aberto com 287 ícones de contorno, criado por Cole Bemis. O visual simples e leve ficou muito popular e, mais tarde, deu origem ao Lucide.

Abrir este conjunto no Icon Library

Outros conjuntos: Lucide · Bootstrap Icons · Emoji

Uma amostra do conjunto

Por que um conjunto pequeno pode ser uma vantagem

O Feather cobre as necessidades comuns de uma interface: navegação, ações, arquivos, comunicação e mídia. Com menos ícones, é mais rápido achar um, e o conjunto se mantém uniforme, porque foi desenhado como um todo. Cada ícone usa uma grade de 24×24 e traço de 2 unidades, sem preenchimento, como o Lucide.

O limite é igualmente claro: para um assunto específico, como finanças ou medicina, o ícone pode não existir. Compare o conjunto com a sua lista de necessidades antes de adotá-lo, porque trocar depois significa revisar todas as telas.

Licença

O Feather usa a licença MIT: dá para usar e modificar os ícones em projetos pessoais e comerciais. Mantenha o aviso de licença ao redistribuir o pacote.

Como usar num projeto

O jeito mais simples é colar o SVG de cada ícone de que você precisa.

O pacote oficial também pode substituir marcadores na página:

npm install feather-icons

    <i data-feather="search"></i>

    import feather from "feather-icons";
    feather.replace();

Isso roda no navegador depois que a página carrega, então os ícones aparecem um instante depois. O SVG colado não tem essa demora, mais um motivo para preferi-lo quando você usa poucos ícones.

Feather ou Lucide?

Vai começar um projeto e não sabe do que vai precisar? O Lucide é a escolha mais segura, porque tem muito mais ícones em quase o mesmo estilo. O Feather continua bom para uma interface pequena, ou para um projeto que já o usa. Como os estilos são muito próximos, um ícone de um costuma combinar com o outro, mas compare no tamanho real antes de misturar.

Como editar um ícone

Se um ícone está quase como você precisa, não é preciso redesenhá-lo. Abra-o no editor do Icon Library pelo lápis do card, mova os pontos ou combine com outro ícone e copie o resultado. Confira a licença do conjunto de origem se pretende redistribuí-lo.