Quem trabalha com design ou desenvolvimento web sempre precisa das bandeiras dos países da américa na mão
Chega um momento em que você precisa listar todos os países da América em uma interface, seja um filtro de seleção, uma tabela de dados ou um jogo. A bagunça é imensa porque existem dezenas de territórios dependendo de onde você desenha a linha. Se você baixar um pacote qualquer da internet, provavelmente vai encontrar bandeiras que não existem mais, símbolos de territórios esquecidos e resoluções todas diferentes. Eu já passei por isso várias vezes. O problema real começa quando você precisa decidir o que inclui e o que exclui. A América do Norte pode significar só Canadá, EUA e México, ou pode significar toda a faixa desde o Alaska até a fronteira sul do México. A América do Sul costuma ser mais aceita, mas mesmo aí há territórios franceses e holandeses que aparecem e desaparecem conforme a fonte. A América Central adiciona Guatemala, Belize, Honduras, El Salvador, Nicarágua, Costa Rica e Panamá, mais a ilha do Caribe que às vezes é separada completamente.
Onde baixar bandeiras dos países da américa de forma confiável
O repositório mais limpo que eu encontrei e uso até hoje é o flagcdn. O cara mantém imagens em SVG puro, cada uma no seu arquivo, organizadas pelo código ISO 3166-1. Isso significa que o Haiti é ht, o Brasil é br, os Estados Unidos são us. Você chama a imagem direto pela URL sem precisar baixar nada. Para o Brasil fica algo como flagcdn.com/br.svg. É rápido, é leve, e funciona em qualquer projeto sem depender de biblioteca externa. Outra opção séria é o pacote de bandeiras do GitHub chamado country-flag-icons. Ele tem versões PNG em várias resoluções além do SVG. A instalação é via npm, o que é bom se você já está num projeto React ou Vue. Mas tem uma pegadinha: ele não atualiza com frequência e alguns territórios ficavam desatualizados por anos. Eu descobri isso na prática quando precisava incluir Wallis e Futuna num projeto e a bandeira simplesmente não existia no pacote.
Se o seu trabalho é mais voltado para dados e mapas, a biblioteca flag-icons do Hiram nolasco é padrão no mercado. Você instala, importa, e usa com classes CSS. É conveniente, mas o tamanho do bundle pode chegar a vários megabytes se você importar tudo. Eu recomendo carregar só o que você realmente precisa. Selecione por país ao invés de importar o pacote completo. Tem também a opção de usar SVGs do Setosa, que é outro repositório conhecido. As bandeiras são bem fiéis, mas o estilo é diferente do resto do mercado. Isso pode causar inconsistência visual se você misturar fontes. Eu já vi projeto inteiro ficar com aparência meio bagunçada por causa disso.
Se você precisa cobrir absolutamente tudo, incluindo dependências e territórios especiais, o banco de dados ISO 3166 é a referência oficial. Todo país tem um código de dois e três letras, e cada um tem uma bandeira associada. O problema é que esse banco não fornece imagens, só códigos. Você precisa mapear esses códigos para as imagens de outra fonte.
Problemas que ninguém conta antes de você implementar
A bandeira do Reino Unido é um caso clássico. No padrão ISO, o código gb é para a Grã-Bretanha, mas a bandeira mostrada é o Union Jack completo, que inclui a Irlanda do Norte. Já o código uk é aceito informalmente, mas não é o recomendado pela norma. Se o seu sistema mostra uk com a bandeira do Reino Unido, tecnicamente está fora do padrão, ainda que todo mundo use assim. Outro problema real que eu enfrentei foi com a bandeira do Saara Ocidental. Ela não tem reconhecimento universal e muitos pacotes simplesmente ignoram. Quando você está construindo uma lista completa de países da américa e do mundo, precisa decidir se inclui ou não. Eu incluí usando uma imagem alternativa baseada no mapa da ONU, mas deixei claro nos metadados que aquele é um caso especial. Ninguém pede isso, mas é importante documentar.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Têm também as bandeiras que mudaram recentemente. O Nepal mudou o design do estandarte presidencial em 2023, e o Brasil adjustou levemente o tom do amarelo em atualizações de 2024. Se você estiver usando pacotes antigos, vai servir bandeira errada sem saber. A solução é verificar a data de atualização do repositório antes de confiar nele.
Dica prática de performance
Se você vai carregar trinta ou quarenta bandeiras numa página, não chame cada uma individualmente do CDN. Faça um preload ou um sprite SVG com todas. Um sprite SVG agrupa todas as bandeiras num único arquivo e você usa a porção correta com viewBox. O tempo de carregamento cai de algo em torno de 400ms para cerca de 80ms em conexões normais. A desvantagem é que o arquivo único fica pesado, mas ainda menor que trinta requisições separadas. Para listas menores, dez bandeiras ou menos, talvez valha mais a pena manter as requisições separadas. O overhead de criar um sprite pode não compensar. A regra prática é: acima de doze bandeiras na tela, pense em sprite ou lazy loading comIntersection Observer. Abaixo disso, deixe o navegador resolver.
Aviso honesto sobre limitações
Nenhuma fonte de bandeiras está 100% correta o tempo todo. Alguns territórios disputados vão gerar contestação independente de qual imagem você escolher. A Palestina, por exemplo, é reconhecida por muitos países mas não por todos, e a forma como você a representa depende do contexto do seu público. O mesmo vale para Taiwan, Kosovo, e outros casos sensíveis. Pacotes prontos de bandeiras também raramente incluem proporções exatas. Muitos usam aproximadamente 2:3 ou 1:2 quando o correto seria outra coisa. A bandeira do Paraguai, por exemplo, tem proporção 3:2 e a frente e o verso são diferentes. Na maioria dos conjuntos que eu vi, ela era renderizada como 2:3 genérica e sem distinção dos lados. Isso pode parecer detalhe, mas em projetos sérios de visualização de dados isso faz diferença.
Se o seu projeto exige precisão absoluta, a alternativa mais robusta é construir seu próprio conjunto a partir de fontes primárias. Leva mais tempo, mas você controla cada detalhe. Para a maioria dos casos, porém, um bom pacote pronto com atualização regular resolve sem dor de cabeça. O que eu gosto de fazer é manter uma cópia local sincronizada a cada seis meses. Assim eu tenho controle, não dependendo de um CDN que pode sair do ar ou mudar a URL. Uma simples cópia dos arquivos SVG para dentro do repositório do projeto, com os códigos ISO como nome, é suficiente. Cobre 95% dos casos e elimina depender de serviço externo.
Resumo prático
Para projetos web rápidos: flagcdn.com com SVGs por URL, baseado em ISO 3166. Para projetos npm/node: country-flag-icons ou flag-icons, mas verifique a data de última atualização.
Para precisão máxima: mantenha SVGs locais e atualize periodicamente, com documentação de quais territórios foram incluídos e excluídos. Para performance em listas grandes: sprite SVG ou lazy loading com Intersection Observer.
