Como conseguir foto das bandeiras dos países para seus projetos
Eu trabalhei com bibliotecas de flags em sistemas de geo-localização e painéis administrativos. O trabalho parece simples no começo — você acha que vai apenas baixar imagens e botar no lugar — mas tem uns problemas que ninguém menciona até você tropeçar neles.O primeiro ponto é onde buscar. A fonte mais confiável que eu uso é o projeto lieutix no GitHub. Ele organiza bandeiras em SVG puro, com tamanhos 4x3 e 16x9, e atualiza frequentemente quando algum país muda sua bandeira oficial. Tem cerca de 200 entradas cobrindo nações reconhecidas e territórios dependentes. O repositório é público, então você pode clonar e usar localmente sem depender de API externa.
Download direto da foto das bandeiras dos países
O acesso é simples se você já tem Node ou Docker rodando. O comando padrão puxa tudo de uma vez:
git clone https://github.com/lieutix/flagcdn.git
Dentro da pasta `svg/` você encontra arquivos nomeados pelo código ISO 3166-1 alpha-2. O Brasil é `br.svg`, Estados Unidos é `us.svg`. Se você precisa de PNG, converte com o ImageMagick:
for f in svg/*.svg; do convert "$f" -background none "${f%.svg}.png"; done
Eu perdi umas duas horas num projeto passado porque não verifiquei a resolução antes de subir para produção. O SVG escala bem, mas se você exportou PNG a 64px e colocou num card de 120px, fica pixelado. A solução foi manter o formato vetorial até o último momento e deixar o navegador fazer o rendering.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Problemas práticos que eu enfrentei
Um erro comum é confiar na nomenclatura dos arquivos. Alguns códigos ISO mudaram com o tempo — Kosovo entrou em 2008, Sudão do Sul em 2011. Se seu sistema usa um banco de dados com códigos antigos, você pode acabar exibindo uma bandeira errada sem perceber. Eu resolvi isso criando um mapeamento manual em JSON que sobrepõe o código ISO ao arquivo correto no repositório. Outro problema são bandeiras com proporções não padrão. A maioria dos conjuntos assume 2:1 ou 3:2, mas alguns países têm formatos diferentes. A Arábia Saudita, por exemplo, usa 2:3 na versão oficial, enquanto o Nepal é o único retângulo não-retangular do mundo. Se seu layout não considera isso, você vai precisar ajustar o CSS com object-fit ou criar containers específicos.
Tempo de carregamento também importa. Se você inclui todas as bandeiras num single bundle, o peso sobe rápido. Num painel com 50 linhas, cada linha puxando uma flag, eu vi o TTI aumentar uns 400ms só com isso. A solução foi implementar lazy loading com Intersection Observer e servir as imagens em WebP quando possível, mantendo SVG como fallback.
Alternativas quando o lieutix não resolve
Se você precisa de imagens mais estilizadas ou com efeitos de textura, o Wikimedia Commons oferece versões oficiais escaneadas de documentos governamentais. O problema é que algumas fotos têm iluminação desigual ou sombras de montagem. Eu prefiro usar essas versões apenas para documentação histórica, nunca para interfaces ativas. Para quem quer rapidez sem manutenção, a API restcountries.com entrega bandeiras em formato SVG direto na resposta JSON. É prática, mas depende de conectividade e o conjunto é limitado aos dados que a API decide incluir. Se seu app precisa funcionar offline, essa opção cai por terra.
Eu já vi times inteiros gastarem dias criando suas próprias bibliotecas de flags porque achavam que era só questão de organizar imagens. Na prática, o custo de manutenção supera qualquer benefício — alterações políticas mudam bandeiras, e manter tudo atualizado é trabalho em tempo integral. Se você está começando agora, recomendo clonar o repositório do lieutix, testar a conversão para WebP com o sharp do Node, e configurar um pipeline de CI que valide os nomes dos arquivos contra a lista oficial do ISO antes de merge. Isso elimina uns 90% dos problemas que eu encontrei nos primeiros seis meses trabalhando com isso.
