Como adicionar ícones no React: lucide-react vs react-icons vs SVG inline vs sprites, tamanhos de bundle medidos, tamanho com currentColor, acessibilidade e configuração no Next.js.
Instale um pacote de ícones como lucide-react ou react-icons e importe cada ícone pelo nome, por exemplo import { Camera } from "lucide-react". Imports nomeados permitem tree-shaking, então só os ícones que você usa entram no bundle. Defina o tamanho com props ou 1em, a cor por meio do currentColor, e esconda os decorativos com aria-hidden.
Escolhas rápidas
Este guia trata de como colocar ícones no código React. Para saber quais conjuntos de ícones gratuitos escolher e as licenças deles, veja nossa lista das melhores bibliotecas de ícones gratuitas. Os números de tamanho aqui vêm dos nossos próprios builds, com a ferramenta e as configurações informadas.
No nosso teste, os dois ficaram pequenos com um único import nomeado: 874 bytes com gzip para um ícone do lucide-react e cerca de 1.3 KB para um ícone do react-icons, porque o react-icons adiciona um pequeno wrapper compartilhado. Os dois crescem só algumas centenas de bytes por ícone extra.
A maioria dos componentes de ícone do React desenha com currentColor, então defina a propriedade CSS color no ícone ou no elemento pai, por exemplo com uma classe de cor de texto. lucide-react e react-icons também aceitam uma prop color.
Só quando o ícone é a única coisa que transmite o significado. Nesse caso, dê a ele role="img" e um aria-label, ou coloque o rótulo no botão que o contém. Ícones ao lado de texto visível devem ser escondidos com aria-hidden="true".
Sim. Os componentes do lucide-react e do react-icons são SVG sem estado e renderizam no servidor. Você só precisa de "use client" em um componente que usa estado ou event handlers.
Quando os mesmos ícones aparecem muitas vezes ou em páginas que não são React. Cada <use> é uma referência curta a um único arquivo em cache, em vez de repetir os dados completos do path no HTML.
Quatro formas de colocar ícones em um app React
Cada ícone é um export nomeado. size, color e strokeWidth são props, e qualquer outra prop é repassada ao svg.
Importe do caminho da própria família (fa, md, lu, fi e assim por diante). IconContext.Provider define padrões para todos os ícones dentro dele.
Cole os dados do path uma vez e reutilize como qualquer componente. width e height de 1em fazem ele acompanhar o tamanho do texto.
Fizemos o bundle de imports de um ícone com esbuild em modo de produção e aplicamos gzip no resultado. Imports nomeados dos dois pacotes ficam pequenos; um import de namespace puxa o conjunto inteiro. O próprio React não entra na conta.
Tamanho medido adicionado por imports de ícones (minificado, depois gzip -9; React não contado)
Defina cada ícone uma vez como <symbol> e depois desenhe-o em qualquer lugar com <use>. Edite a cor no wrapper e os dois ícones acompanham, porque os paths usam currentColor.
Sirva os symbols como /icons.svg e aponte cada ícone para um id dentro dele. O navegador baixa e guarda o arquivo em cache uma vez. Um sprite externo precisa estar na mesma origem.
Ícones que usam currentColor herdam a cor do texto do elemento pai, então estilos de hover e modo escuro não precisam de CSS específico para ícones. Mude o valor de color e veja os dois ícones acompanharem.
Um ícone ao lado de texto visível é decoração: esconda-o. Um ícone que é o único conteúdo de um botão precisa de um nome no botão.
Os componentes do lucide-react e do react-icons renderizam sem problema em Server Components porque são SVG simples sem estado. Só o componente que trata um clique precisa de "use client".
O Next.js já otimiza os imports de uma lista de pacotes de ícones comuns, incluindo lucide-react e react-icons. Adicione aqui qualquer outro pacote de ícones que você use para manter os builds de desenvolvimento rápidos.
Ainda vai escolher um conjunto? Veja
as melhores bibliotecas de ícones gratuitas
Comece grátis · Sem cartão de crédito