Baixar imagens de bandeiras e sprites de ícones

Use o gerador abaixo para selecionar países, escolher bandeiras individuais ou uma imagem de ícones combinada, definir proporção e tamanho, depois gerar e baixar imagens de bandeiras de países. Veja a lista de recursos abaixo para cada controle e os passos de uso abaixo para a ordem recomendada.

Os controles desta página cobrem seleção em massa, estilo da bandeira, tipo de saída, dimensionamento, layout e exportação. Estas são as principais opções disponíveis ao criar imagens de bandeiras.

• Selecionar nomes de países: Escolha na lista completa, filtre por continente (África, Antártida, Ásia, Europa, Austrália, América do Norte, América do Sul), pesquise por nome ou marque e desmarque linhas conforme necessário.
• Colar códigos de país: Abra a caixa de diálogo de colagem e selecione países em massa a partir de um array JavaScript (por exemplo ['US', 'GB', 'DE']), uma lista com um código ISO por linha ou uma string delimitada como CSV com vírgula, dois-pontos, ponto e vírgula, tabulação ou um separador personalizado. Apenas códigos válidos são aplicados à tabela; entradas inválidas são informadas antes de clicar em Aplicar.
• Estilo da bandeira: Escolha bandeiras onduladas com efeito de ondulação ou bandeiras planas com aparência retangular padrão antes de gerar downloads de bandeiras individuais ou um sprite de ícones.
• Embaralhar ordem dos países: Aleatorize a ordem em que os países aparecem na grade do sprite. Os nomes de classe ISO, como iso_US, permanecem os mesmos; apenas a posição de cada bandeira no canvas muda.
• Selecionar tipo de imagem: Download single flag para imagens redimensionadas separadas ou create icon flags para colocar todas as bandeiras selecionadas em uma única imagem.
• Manter proporção: Trave largura e altura em proporção 4:3 ou 16:9, ou desative o travamento para dimensões personalizadas.
• Definir tamanho da imagem: Informe largura e altura de cada bandeira. Os limites diferem para modos de bandeira única e de ícones, para que os sprites permaneçam pequenos e os downloads individuais possam ser maiores.
• Gerar imagem: Crie as bandeiras redimensionadas ou o canvas de ícones combinado a partir da sua seleção.
• Grade automática: Após gerar ícones, deixe a ferramenta calcular linhas e colunas pelo número de países selecionados em vez de definir manualmente.
• Ícone de globo: Mostra um marcador de globo para países sem imagem de bandeira na pré-visualização do sprite.
• Exportar PNG, zip e JSON: Baixe apenas o PNG gerado, um arquivo zip com flag-icons.png mais arquivos HTML e CSS correspondentes, ou um arquivo JSON com posições do sprite e metadados de países para React, canvas e outros fluxos de aplicativos.
• Código das bandeiras: Após a geração de ícones, copie HTML e CSS da seção Código das bandeiras. A saída usa um único arquivo sprite (flag-icons.png) com classes como flags_img e iso_AF, cada uma com o background-position correto para aquele país.

Siga estas etapas para criar imagens de bandeiras de países com as opções desta página.

1. Selecione os nomes dos países desejados. Use o filtro por continente ou a caixa de pesquisa e marque apenas as linhas necessárias.
2. Selecione o tipo de imagem: Download single flag para arquivos separados ou create icon flags para todas as bandeiras selecionadas em uma única imagem.
3. Opcionalmente, ative keep ratio e escolha proporção 4:3 ou proporção 16:9.
4. Defina o tamanho da imagem informando largura e altura dentro dos limites do tipo de imagem escolhido.
5. Gere a imagem. Use Download Image apenas para o PNG, Download zip para imagem + HTML + CSS em um arquivo, ou copie HTML e CSS da seção Código das bandeiras sem baixar.

O tipo de imagem controla se você recebe muitos arquivos separados ou um sprite. Escolha o modo que corresponde à forma como usará as bandeiras no seu projeto.

O modo de ícones funciona com um ou mais países selecionados, mas uma grade com quatro bandeiras ou mais costuma dar um layout de sprite mais útil. O modo de bandeira única funciona quando você precisa de apenas um país ou de um pequeno conjunto de arquivos separados.

Manter proporção e Definir tamanho da imagem funcionam juntos. Quando o travamento de proporção está ativo, alterar largura ou altura atualiza o outro lado para que as bandeiras permaneçam proporcionais.

• Proporção 4:3: Formato comum semelhante a bandeiras para ícones compactos e itens de lista.
• Proporção 16:9: Moldura mais larga quando você quer miniaturas em estilo paisagem.
• Desative Manter proporção quando precisar de largura e altura personalizadas que não correspondam a esses presets.

Os limites de tamanho dependem do tipo de imagem. O modo de ícones mantém cada bandeira pequena (cerca de 15px a 100px de largura) para que o sprite combinado permaneça gerenciável. O modo de bandeira única permite larguras maiores (cerca de 15px a 1000px) para exibição ou download. A altura segue as mesmas regras do modo.

Depois de gerar um sprite de ícones, o painel de pré-visualização permite refinar como as bandeiras ficam no canvas antes de baixar ou copiar o código.

• Linha e colunas: Controle quantas bandeiras aparecem na horizontal e na vertical na grade do sprite.
• Espaço entre linhas e colunas: Adicione espaços horizontais ou verticais entre as células das bandeiras.
• Padding: Adicione espaço ao redor da borda externa da imagem combinada.
• Raio: Suavize os cantos das bandeiras com recorte arredondado quando quiser ícones mais suaves.
• Ajustar pré-visualização ao tamanho: Encaixe um canvas largo na página para revisar o sprite completo.
• Atualizar: Reconstrua o canvas após alterações de layout para que as posições permaneçam sincronizadas com o CSS gerado.
• Código das bandeiras: Copie o HTML e CSS gerados da seção Código das bandeiras. Cada país selecionado recebe uma classe iso_XX com background-position correspondente no sprite compartilhado.
• Download Image: Exporte apenas o PNG sprite gerado quando já tiver seu próprio HTML e CSS, ou quando precisar apenas do recurso de imagem.
• Download zip: Exporte flag-icons.png junto com o HTML e CSS gerados em um zip para que o pacote completo do sprite permaneça sincronizado.

Mantenha o canvas total abaixo dos limites máximos de largura e altura mostrados pela ferramenta. Grades muito grandes podem exceder o tamanho de imagem permitido; reduza linhas, colunas ou tamanho do ícone se ver um aviso de tamanho. Depois de alterar espaçamento ou tamanho, atualize a pré-visualização novamente antes de copiar o CSS ou baixar o zip para que as posições permaneçam precisas.

No modo create icon flags, a seção Código das bandeiras gera código pronto para colar que aponta para uma única imagem sprite. Cada país usa uma classe compartilhada flags_img mais uma classe ISO como iso_AF que define o deslocamento exato de background para aquela célula da bandeira.

A amostra HTML combina uma caixa de bandeira com o rótulo do país. A amostra CSS define a linha flex, o tamanho compartilhado do sprite e uma regra por código ISO. Sua saída ao vivo é atualizada para corresponder aos países e ao layout que você selecionou.

<div class="flex-box">
    <div class="flags_img iso_AF"></div>
    <div>Afghanistan</div>
</div>

<div class="flex-box">
    <div class="flags_img iso_AX"></div>
    <div>Aland Islands</div>
</div>

<div class="flex-box">
    <div class="flags_img iso_AL"></div>
    <div>Albania</div>
</div>

<div class="flex-box">
    <div class="flags_img iso_DZ"></div>
    <div>Algeria</div>
</div>

.flex-box {
    display: flex;
    justify-content: start;
    align-items: center;
}

.flags_img {
    background-image: url('flag-icons.png');
    background-repeat: no-repeat;
    display: inline-block;
    width: 50px;
    height: 28px;
    background-color: transparent;
    vertical-align: middle;
    background-position: 51px 29px;
    margin: 8px;
}

.iso_AF {background-position: 0 0}
.iso_AL {background-position: -102px 0}
.iso_AX {background-position: -51px 0}
.iso_DZ {background-position: -153px 0}

Coloque flag-icons.png ao lado do seu CSS (ou atualize o caminho url()), depois cole o HTML e CSS na sua página. Prefira Download zip quando quiser a imagem, HTML e CSS como um pacote correspondente. Alterar linhas, espaçamento ou tamanho do ícone modifica os deslocamentos em pixels, então clique em Atualizar e copie o Código das bandeiras atualizado ou baixe o zip novamente depois de alterar o layout.

Ícones de bandeiras de países aparecem em muitas superfícies de produtos. Estes são lugares comuns para usar as imagens desta ferramenta.

• Seletores de idioma e região em cabeçalhos de sites
• Campos de seleção de país ao lado de formulários de telefone ou endereço
• Localizadores de lojas, opções de envio e listas de países no checkout
• Painéis que agrupam análises ou usuários por país
• Telas de configurações de aplicativos móveis que mostram locais disponíveis
• Páginas de marketing que destacam mercados atendidos
• Listas sprite CSS que mostram uma bandeira ao lado de cada nome de país em uma única requisição PNG

Combine ícones de bandeira com um dropdown de nomes de países ou uma lista JSON de países quando também precisar de códigos ISO e rótulos na marcação ou nos dados do aplicativo. Links relacionados estão na seção de ferramentas relacionadas.

Respostas a perguntas comuns sobre download de bandeira única, sprites de ícones, posições de background CSS, proporção, limites de tamanho, opções de layout e bandeiras SVG relacionadas.

Precisa de bandeiras SVG, marcação de dropdown de países ou dados de países em outro formato? Estas páginas cobrem fluxos de trabalho próximos.

• Download de bandeiras SVG de países para bandeiras vetoriais escaláveis e código SVG.
• Dropdown HTML de nomes de países para listas select com códigos ISO e rótulos.
• Array JavaScript de nomes de países para listas de países em JSON e objetos.
• Array PHP de nomes de países para dados de países no servidor.
• Central de ferramentas de imagem para outras páginas de download e conversão de imagens.
• Conversor de imagem para WebP quando você quer otimizar PNGs de bandeiras exportados.