Guia

Tudo o que o Icon Library faz, passo a passo. Use o índice para ir direto a um assunto.

Como usar

1. Escolha um conjunto no botão Escolher. Nada é baixado antes disso, e cada conjunto fica em cache enquanto a página estiver aberta.
2. Refine com Todas as categorias (dá para marcar várias) e com o campo de busca, que procura pelo nome dos ícones.
3. Defina o estilo nos controles Tamanho, Traço e Cor. Eles valem para tudo o que você copia, baixa ou envia ao scratchpad, e a prévia acompanha o traço e a cor. Só o Lucide e o Feather têm traço; os emojis mantêm as próprias cores.
4. Clique num ícone para copiar o SVG (ou o caractere do emoji). O botão direito copia a alternativa: o nome do ícone nos conjuntos vetoriais, ou o emoji dentro de um SVG.
5. Use os botões de cada card:
   • + envia o ícone ao scratchpad;
   • ⋯ abre os downloads (SVG, PNG no tamanho escolhido) e Copiar como componente React;
   • o lápis (todos os conjuntos vetoriais) abre o editor de ícones.

O editor de ícones

O lápis de um card abre o ícone numa grade, pronto para mudar. O ícone chega com o tamanho, o traço e a cor que você escolheu.

• Mudar a forma: selecione uma forma na lista ou na grade e arraste os pontos dela. As curvas mostram os pontos de controle, ligados por linhas tracejadas; mover um ponto da curva leva os controles junto.
• Mover: arraste uma forma, ou use as setas do teclado ou os botões. Os pontos encaixam na grade (1, ½ ou ¼ de unidade, ou livre).
• Transformar: girar 90°, espelhar e aumentar ou diminuir — a forma selecionada, ou o ícone inteiro quando nada está selecionado.
• Adicionar e remover: novas linhas, círculos, retângulos e curvas; oculte uma forma para ver o ícone sem ela, ou apague-a.
• Combinar ícones: + Ícone por cima busca no Lucide, no Feather e no Bootstrap e põe outro ícone sobre o atual, ajustado à mesma grade e com o próprio estilo — uma estrela preenchida do Bootstrap pode ficar dentro de um coração de contorno do Lucide. Cada ícone ganha um título na lista que o seleciona inteiro, para mover, girar ou redimensionar.
• Cores: dê a cada forma, ou a cada ícone, uma cor e uma espessura de traço próprias no painel Seleção. Cor do texto volta a herdar a cor do texto ao redor; formas com cor própria a mantêm onde quer que o ícone seja colado.
• Salvar e continuar depois: Salvar .ile baixa o projeto como um arquivo .ile — um pequeno arquivo de texto que guarda o que o SVG puro perde: de que ícone veio cada forma, as formas ocultas e o nome. Abra de novo com Abrir .ile, no editor ou ao lado da busca na página principal, ou solte o arquivo sobre o editor. Abrir um arquivo durante a edição pode ser desfeito.
• Código: o código SVG ao lado da grade acompanha cada mudança, e você também pode digitar nele. As prévias mostram o resultado em 16, 24, 32 e 48 pixels.
• Desfazer e Refazer (Ctrl+Z, Ctrl+Y); depois copie, baixe ou envie o ícone editado ao scratchpad. Ícones do Lucide e do Feather também podem ser abertos no Lucide Studio, um editor online independente com ferramentas mais avançadas.

O scratchpad

A aba Scratchpad na borda direita abre uma gaveta onde você junta ícones enquanto navega. Cada ícone entra como um comentário HTML com o nome, seguido do SVG, então o resultado está pronto para colar num projeto. Você também pode digitar livremente. Copiar tudo copia o conteúdo e Limpar o esvazia. O texto fica guardado no seu navegador, então continua lá na próxima visita.

Para assistentes de IA

Assistentes de IA podem criar um ícone e entregá-lo como um link que o abre aqui, no editor, pronto para ajustar. O ícone viaja dentro do próprio link, depois do #, então nunca é enviado ao nosso servidor. No editor, Compartilhar link gera o mesmo tipo de link para o seu próprio projeto. Instruções para IAs: llms.txt.

Compartilhar uma busca

A barra de endereço acompanha o que você está vendo — por exemplo ?set=lucide&q=arrow. Copie o endereço para compartilhar uma busca ou salvá-la nos favoritos.

Atalhos de teclado

Tema, idioma e preferências

A página segue o tema claro ou escuro do seu sistema; o botão no cabeçalho alterna entre eles. O idioma é detectado pelo navegador e pode ser trocado no seletor ao lado. As duas escolhas, o tamanho, o traço e a cor escolhidos e o texto do scratchpad ficam guardados no seu navegador, então continuam lá na próxima visita.

Pague um café

O Icon Library é gratuito. Se ele ajuda você, o botão Me pague um café (cerca de US$ 3, pago com segurança pelo Stripe) ajuda a pagar o servidor, o domínio e as ferramentas que o mantêm no ar. Como agradecimento, o site fica sem anúncios para você por 30 dias a partir do pagamento.

Depois de pagar você recebe um código de apoiador. Para tirar os anúncios também em outro aparelho — até 3 —, abra o mesmo botão lá e digite o código. O botão só aparece quando os pagamentos estão disponíveis.

Publicar na Iconlibrary

A Iconlibrary é o conjunto de ícones da comunidade: ícones desenhados no editor por apoiadores, revisados e compartilhados com todos. Ela aparece na lista de conjuntos como os outros.

1. Abra um ícone no editor e desenhe ou ajuste.
2. Clique em Publicar na Iconlibrary, dê um nome, escolha até 3 categorias e, se quiser, um crédito (seu nome ou site).
3. Seu código de apoiador já vem preenchido no aparelho em que você pagou o café; em outro aparelho, digite-o.
4. Confirme que criou o ícone (ou tem o direito de compartilhá-lo) e que o disponibiliza sob a licença MIT, e envie. Ele aparece na Iconlibrary depois da revisão.

Só formas básicas podem ser publicadas — linhas, círculos, elipses, retângulos, polilinhas, polígonos e paths. Logos de marcas e cópias de outros ícones não são aceitos.