← Voltar aos ícones

Ícones Lucide

O Lucide é um conjunto de código aberto com cerca de 1.900 ícones de contorno. Ele nasceu como uma derivação do Feather mantida pela comunidade e hoje é um dos mais completos do tipo, o que o torna uma escolha segura para interfaces.

Abrir este conjunto no Icon Library

Outros conjuntos: Feather · Bootstrap Icons · Emoji

Uma amostra do conjunto

O que esse estilo oferece

Cada ícone é desenhado numa grade de 24×24, com traço de 2 unidades, pontas arredondadas e sem preenchimento. Como as formas são linhas, o mesmo ícone fica mais leve ou mais pesado mudando stroke-width, sem precisar de outro arquivo. Os ícones usam currentColor, então acompanham a cor do texto em volta, inclusive ao passar o mouse e no tema escuro.

A consistência é o principal motivo para escolhê-lo. Ao misturar um ícone do Lucide com um de um conjunto preenchido, a diferença de peso visual logo aparece.

Licença

O Lucide usa a licença ISC, curta e permissiva: dá para usar os ícones em projetos pessoais e comerciais e modificá-los. Mantenha o aviso de licença ao redistribuir o próprio pacote.

Como usar num projeto

Para um ou dois ícones, colar o SVG basta e não acrescenta dependência:

<button aria-label="Buscar">
      <svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24" fill="none"
           stroke="currentColor" stroke-width="2">…</svg>
    </button>

Para muitos ícones no React, o pacote oficial importa cada um separadamente:

npm install lucide-react

    import { Search } from "lucide-react";

    <Search size={20} strokeWidth={1.5} />

Há pacotes oficiais para outros frameworks também. Veja a lista atual em lucide.dev.

Lucide ou Feather?

Eles são quase iguais, porque o Lucide veio do Feather. O Lucide tem mais de seis vezes mais ícones, então é mais provável que tenha o que você precisa. O Feather faz sentido quando você só precisa dos ícones comuns e prefere um conjunto pequeno e estável, ou quando o projeto já o usa.

Erros comuns