Descargar imágenes de banderas e iconos sprite

Usa el generador de abajo para seleccionar países, elegir banderas individuales o una imagen de iconos combinada, definir relación de aspecto y tamaño, y luego generar y descargar imágenes de banderas. Consulta la lista de características abajo para cada control y los pasos de uso abajo para el orden recomendado.

Los controles de esta página cubren selección masiva, estilo de bandera, tipo de salida, tamaño, diseño y exportación. Estas son las opciones principales disponibles mientras creas imágenes de banderas.

• Seleccionar nombres de países: Elige de la lista completa, filtra por continente (África, Antártida, Asia, Europa, Australia, América del Norte, América del Sur), busca por nombre o marca y desmarca filas según necesites.
• Pegar códigos de país: Abre el diálogo de pegado y selecciona países en bloque desde un array de JavaScript (por ejemplo ['US', 'GB', 'DE']), una lista con un código ISO por línea o una cadena delimitada como CSV con coma, dos puntos, punto y coma, tabulación o un separador personalizado. Solo se aplican códigos válidos a la tabla; las entradas no válidas se informan antes de hacer clic en Aplicar.
• Estilo de bandera: Elige banderas onduladas con efecto de onda o banderas planas con aspecto rectangular estándar antes de generar descargas de bandera individual o un sprite de iconos.
• Mezclar orden de países: Aleatoriza el orden en que aparecen los países en la cuadrícula del sprite. Los nombres de clase ISO como iso_US permanecen iguales; solo cambia la posición de cada bandera en el lienzo.
• Seleccionar tipo de imagen: Descargar bandera individual para imágenes redimensionadas separadas, o crear iconos de banderas para colocar todas las banderas seleccionadas en una imagen.
• Mantener proporción: Bloquea ancho y alto a una relación de aspecto 4:3 o 16:9, o desactiva el bloqueo para dimensiones personalizadas.
• Establecer tamaño de imagen: Introduce ancho y alto para cada bandera. Los límites difieren entre modo bandera individual e icono para que los sprites sigan siendo pequeños y las descargas individuales puedan ser mayores.
• Generar imagen: Crea las banderas redimensionadas o el lienzo de iconos combinado a partir de tu selección.
• Ajustar cuadrícula automáticamente: Tras generar iconos, deja que la herramienta calcule filas y columnas según el número de países seleccionados en lugar de fijarlas manualmente.
• Icono de globo: Muestra un marcador de globo para países sin imagen de bandera en la vista previa del sprite.
• Exportar PNG, zip y JSON: Descarga solo el PNG generado, un archivo zip con flag-icons.png más archivos HTML y CSS coincidentes, o un archivo JSON con posiciones del sprite y metadatos de países para React, canvas y otros flujos de trabajo en apps.
• Código de bandera: Tras generar iconos, copia HTML y CSS desde la sección Código de bandera. La salida usa un archivo sprite (flag-icons.png) con clases como flags_img y iso_AF, cada una con el background-position correcto para ese país.

Sigue estos pasos para crear imágenes de banderas de países con las opciones de esta página.

1. Selecciona los nombres de países que quieras. Usa el filtro por continente o el cuadro de búsqueda y marca solo las filas que necesites.
2. Seleccionar tipo de imagen: Descargar bandera individual para archivos separados, o crear iconos de banderas para todas las banderas seleccionadas en una imagen.
3. Opcionalmente activa Mantener proporción y elige relación de aspecto 4:3 o 16:9.
4. Establece el tamaño de imagen introduciendo ancho y alto dentro de los límites del tipo de imagen elegido.
5. Genera la imagen. Usa Descargar imagen solo para el PNG, Descargar zip para imagen + HTML + CSS en un archivo, o copia HTML y CSS desde la sección Código de bandera sin descargar.

Tipo de imagen controla si obtienes muchos archivos separados o un sprite. Elige el modo que coincida con cómo usarás las banderas en tu proyecto.

El modo icono funciona con uno o más países seleccionados, pero una cuadrícula de cuatro banderas o más suele dar un diseño de sprite más útil. El modo bandera individual funciona cuando solo necesitas un país o un conjunto pequeño de archivos separados.

Mantener proporción y Establecer tamaño de imagen funcionan juntos. Cuando el bloqueo de proporción está activado, cambiar ancho o alto actualiza el otro lado para que las banderas sigan siendo proporcionales.

• Relación de aspecto 4:3: Una forma habitual tipo bandera para iconos compactos y elementos de lista.
• Relación de aspecto 16:9: Un marco más ancho cuando quieres miniaturas en formato apaisado.
• Desactiva Mantener proporción cuando necesites un ancho y alto personalizados que no coincidan con esos valores predefinidos.

Los límites de tamaño dependen del tipo de imagen. El modo icono mantiene cada bandera pequeña (aproximadamente de 15px a 100px de ancho) para que el sprite combinado siga siendo manejable. El modo bandera individual permite anchos mayores (aproximadamente de 15px a 1000px) para visualización o descarga. La altura sigue las mismas reglas del modo.

Tras generar un sprite de iconos, el panel de vista previa te permite afinar cómo se colocan las banderas en el lienzo antes de descargar o copiar código.

• Fila y columnas: Controla cuántas banderas aparecen en horizontal y vertical en la cuadrícula del sprite.
• Espacio entre filas y espacio entre columnas: Añade huecos horizontales o verticales entre las celdas de bandera.
• Padding: Añade espacio alrededor del borde exterior de la imagen combinada.
• Radio: Suaviza las esquinas de la bandera con un recorte redondeado cuando quieras iconos más suaves.
• Ajustar tamaño de vista previa: Adapta un lienzo ancho a la página para revisar el sprite completo.
• Actualizar: Reconstruye el lienzo tras cambios de diseño para que las posiciones sigan sincronizadas con el CSS generado.
• Código de bandera: Copia el HTML y CSS generados desde la sección Código de bandera. Cada país seleccionado obtiene una clase iso_XX con un background-position coincidente en el sprite compartido.
• Descargar imagen: Exporta solo el sprite PNG generado cuando ya tienes tu propio HTML y CSS, o solo necesitas el recurso de imagen.
• Descargar zip: Exporta flag-icons.png junto con el HTML y CSS generados en un zip para que el paquete sprite completo permanezca sincronizado.

Mantén el lienzo total por debajo de los límites máximos de ancho y alto que muestra la herramienta. Las cuadrículas muy grandes pueden superar el tamaño de imagen permitido; reduce filas, columnas o tamaño de icono si ves una advertencia de tamaño. Tras cambiar espaciado o tamaño, actualiza la vista previa de nuevo antes de copiar CSS o descargar el zip para que las posiciones sigan siendo precisas.

En el modo crear iconos de banderas, la sección Código de bandera genera código listo para pegar que apunta a una imagen sprite. Cada país usa una clase compartida flags_img más una clase ISO como iso_AF que define el desplazamiento de fondo exacto para esa celda de bandera.

El ejemplo HTML empareja un recuadro de bandera con la etiqueta del país. El ejemplo CSS define la fila flex, el tamaño compartido del sprite y una regla por código ISO. Tu salida en vivo se actualiza para coincidir con los países y el diseño que seleccionaste.

<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}

Coloca flag-icons.png junto a tu CSS (o actualiza la ruta url()), luego pega el HTML y CSS en tu página. Prefiere Descargar zip cuando quieras la imagen, HTML y CSS como un paquete coincidente. Cambiar filas, espaciado o tamaño de icono modifica los desplazamientos en píxeles, así que haz clic en Actualizar y copia el Código de bandera actualizado o vuelve a descargar el zip después de cambiar el diseño.

Los iconos de banderas de países aparecen en muchas superficies de producto. Estos son lugares habituales para usar las imágenes de esta herramienta.

• Conmutadores de idioma y región en cabeceras de sitios web
• Campos de selección de país junto a formularios de teléfono o dirección
• Localizadores de tiendas, opciones de envío y listas de países en el checkout
• Paneles que agrupan analíticas o usuarios por país
• Pantallas de configuración de apps móviles que muestran locales disponibles
• Páginas de marketing que destacan mercados admitidos
• Listas sprite CSS que muestran una bandera junto a cada nombre de país desde una sola petición PNG

Combina iconos de bandera con un desplegable de nombres de países o una lista JSON de países cuando también necesites códigos ISO y etiquetas en marcado o datos de aplicación. Los enlaces relacionados se listan en la sección de herramientas relacionadas.

Respuestas a preguntas habituales sobre descarga de bandera individual, sprites de iconos, posiciones background-position en CSS, relación de aspecto, límites de tamaño, opciones de diseño y banderas SVG relacionadas.

¿Necesitas banderas SVG, marcado de desplegable de países o datos de países en otro formato? Estas páginas cubren flujos de trabajo cercanos.

• Descarga de banderas de países SVG para banderas vectoriales escalables y código SVG.
• Desplegable HTML de nombres de países para listas select con códigos ISO y etiquetas.
• Array JavaScript de nombres de países para listas de países en JSON y objetos.
• Array PHP de nombres de países para datos de países en el servidor.
• Centro de herramientas de imagen para otras páginas de descarga y conversión de imágenes.
• Convertidor de imagen a WebP cuando quieras optimizar PNG de banderas exportados.