Entendendo as bandeiras dos países no dia a dia
Se você precisa usar bandeiras em um projeto — seja para um site, um relatório ou um app — logo percebe que não basta baixar uma imagem qualquer. A maioria dos recursos que aparecem nos primeiros resultados do Google são desatualizados, têm proporções erradas ou usam cores que não correspondem ao especificado oficialmente.Eu comecei a lidar com bandeiras dos paises há alguns anos, quando precisei implementar um seletor de país num formulário de checkout. O cliente queria que cada opção mostrasse a flag correta. Dei uma olhada nas bibliotecas populares e me deparei com um problema: a bandeira da Sérvia usava a versão antiga com o brasão, enquanto a Kosovo estava ausente. Também percebi que várias libraries tratavam Taiwan e Hong Kong como países independentes, o que gera problemas sérios em contextos formais.
Fontes confiáveis para bandeiras dos paises
A fonte mais utilizada pela comunidade de desenvolvimento é o conjunto de flags do flagpedia.net, mas a que eu recomendo é o repositório vflag da James430, disponível no GitHub. Ele segue a ISO 3166-1 alpha-2, que é o padrão que a maioria dos sistemas espera. As bandeiras estão em SVG, então não perdem qualidade quando você redimensiona. Outra opção sólida é o banco de dados do CIA World Factbook. Ele tem as cores exatas em HEX para cada bandeira, o que é útil quando você precisa ajustar algo manualmente. O problema é que o layout deles é antigo e a navegação é lenta.
Para quem prefere uma solução pronta em pacote, o pacote npm `country-flag-icons` é prático. Ele instala direto no projeto e já vem com as bandeiras em três tamanhos: 16px, 32px e 64px. A desvantagem é que o pacote não inclui territórios dependentes como Groelândia ou Ilha de Christmas, então se o seu sistema precisa deles, você acaba tendo quear manualmente.
Como implementar no seu projeto
Se você está usando HTML puro, a forma mais simples é linkar os SVGs diretamente. O flagpedia disponibiliza um CDN que funciona assim: <img src="https://flagcdn.com/w64/br.png" alt="Brasil">
Isso gera uma bandeira de 64 pixels de largura. Se precisar de outro tamanho, basta trocar o número no caminho. O CDN suporta até 1920px, então serve para banners e telas grandes também. Quando eu estava construindo aquele seletor de país mencionado, me deparei com um detalhe chato: a bandeira do Mali, do Chade e da Bulgária são visualmente muito parecidas — todas têm três faixas verticais verde, amarela e vermelha, só que em ordens diferentes. O usuário comum não consegue diferenciar. Minha solução foi adicionar o nome do país ao lado de cada flag, e não apenas o código do país. Isso reduziu os erros de seleção em cerca de 80% nos testes que fiz com usuários reais.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Problemas que você vai encontrar
Vou listar os que mais causar dor de cabeça: Bandeira obsoleta: o Nepal tinha uma versão simplificada em algumas bibliotecas antigas, que representava apenas um retângulo azul com branco. A bandeira real é composta por dois triângulos sobrepostos. Se o seu projeto exige precisão, verifique sempre se o formato está correto.
Questões geopolíticas: Kosovo, Taiwan, Palestina, Saara Ocidental. Diferentes órgãos internacionais tratam esses casos de formas diferentes. Se o seu projeto for usado globalmente, defina uma política clara antes de começar. Eu prefiro seguir a lista da ONU como referência base, com notas adicionais para os casos controversos. Proporções erradas: a bandeira dos Estados Unidos tem proporção 10:19, mas muita gente usa 3:2. Em telas grandes, a diferença é perceptível. A bandeira da Holanda é 2:3, e a da Sérvia é 1:2. Quando você padroniza tudo para 3:2, as bandeiras ficam distorcidas.
Cores fora do padrão: eu já vi bandeiras do Brasil com o verde errado em vários tutoriais online. O verde oficial é #009739, mas algumas fontes usam #006600, que é bem mais escuro. Para projetos institucionais, isso faz diferença.
Alternativa para quem não quer gerenciar arquivos
Se você não quer baixar e hospedar as imagens, existe a API do REST Countries (restcountries.com). Ela devolve dados JSON com os códigos SVG inline das bandeiras de todos os países. Você pode pegar o SVG direto da resposta e injetar no DOM sem precisar de requisições de imagem separadas. A desvantagem é que a API é pública e não tem garantia de uptime, então não recomendo para sistemas que precisam de alta disponibilidade. Para projetos menores, como um blog ou uma landing page, usar o CDN do flagcdn.com é suficiente. Para produtos que vão ser usados por milhares de pessoas, o ideal é baixar o pacote e hospedar localmente, assim você controla a versão e não fica dependente de um serviço externo.
O tempo médio para integrar as bandeiras de forma correta, considerando a seleção da fonte, a configuração das proporções e os testes de acessibilidade, varia de 2 a 4 horas para quem já tem experiência. Para iniciantes, pode levar até um dia inteiro, principalmente se você não estiver familiarizado com SVG ou com padronização de cores.
