Télécharger des images de drapeaux et des sprites d'icônes

Utilisez le générateur ci-dessous pour sélectionner des pays, choisir des drapeaux individuels ou une image d'icônes combinée, définir le rapport d'aspect et la taille, puis générer et télécharger des images de drapeaux. Consultez la liste des fonctionnalités ci-dessous pour chaque contrôle et les étapes d'utilisation ci-dessous pour l'ordre recommandé.

Les contrôles de cette page couvrent la sélection en masse, le style de drapeau, le type de sortie, la taille, la disposition et l'export. Voici les principales options disponibles pendant que vous créez des images de drapeaux.

• Sélectionner des noms de pays : Choisissez dans la liste complète, filtrez par continent (Afrique, Antarctique, Asie, Europe, Australie, Amérique du Nord, Amérique du Sud), recherchez par nom ou cochez et décochez les lignes selon vos besoins.
• Coller les codes pays : Ouvrez la boîte de dialogue de collage et sélectionnez des pays en bloc depuis un tableau JavaScript (par exemple ['US', 'GB', 'DE']), une liste avec un code ISO par ligne ou une chaîne délimitée comme CSV avec virgule, deux-points, point-virgule, tabulation ou un séparateur personnalisé. Seuls les codes valides sont appliqués au tableau ; les entrées invalides sont signalées avant de cliquer sur Appliquer.
• Style de drapeau : Choisissez des drapeaux ondulés avec effet de vague ou des drapeaux plats avec un aspect rectangulaire standard avant de générer des téléchargements de drapeau unique ou un sprite d'icônes.
• Mélanger l'ordre des pays : Randomisez l'ordre d'apparition des pays dans la grille du sprite. Les noms de classe ISO comme iso_US restent identiques ; seule la position de chaque drapeau sur le canevas change.
• Sélectionner le type d'image : Télécharger un drapeau unique pour des images redimensionnées séparées, ou créer des icônes de drapeaux pour placer tous les drapeaux sélectionnés dans une image.
• Conserver le ratio : Verrouillez largeur et hauteur sur un rapport d'aspect 4:3 ou 16:9, ou désactivez le verrouillage pour des dimensions personnalisées.
• Définir la taille de l'image : Saisissez la largeur et la hauteur pour chaque drapeau. Les limites diffèrent entre le mode drapeau unique et le mode icône pour que les sprites restent petits et les téléchargements individuels puissent être plus grands.
• Générer l'image : Créez les drapeaux redimensionnés ou le canevas d'icônes combiné à partir de votre sélection.
• Ajuster la grille automatiquement : Après la génération d'icônes, laissez l'outil calculer les lignes et colonnes selon le nombre de pays sélectionnés au lieu de les définir manuellement.
• Icône globe : Affiche un marqueur globe pour les pays sans image de drapeau dans l'aperçu du sprite.
• Exporter PNG, zip et JSON : Téléchargez uniquement le PNG généré, une archive zip avec flag-icons.png plus les fichiers HTML et CSS correspondants, ou un fichier JSON avec les positions du sprite et les métadonnées de pays pour React, canvas et autres flux de travail d'applications.
• Code drapeau : Après la génération d'icônes, copiez le HTML et le CSS depuis la section Code drapeau. La sortie utilise un fichier sprite (flag-icons.png) avec des classes comme flags_img et iso_AF, chacune avec le background-position correct pour ce pays.

Suivez ces étapes pour créer des images de drapeaux de pays avec les options de cette page.

1. Sélectionnez les noms de pays souhaités. Utilisez le filtre par continent ou la zone de recherche, puis cochez uniquement les lignes nécessaires.
2. Sélectionner le type d'image : Télécharger un drapeau unique pour des fichiers séparés, ou créer des icônes de drapeaux pour tous les drapeaux sélectionnés dans une image.
3. Activez éventuellement Conserver le ratio et choisissez le rapport d'aspect 4:3 ou 16:9.
4. Définissez la taille de l'image en saisissant largeur et hauteur dans les limites du type d'image choisi.
5. Générez l'image. Utilisez Télécharger l'image pour le PNG seul, Télécharger zip pour image + HTML + CSS dans un fichier, ou copiez le HTML et le CSS depuis la section Code drapeau sans télécharger.

Le type d'image détermine si vous obtenez de nombreux fichiers séparés ou un sprite. Choisissez le mode qui correspond à la façon dont vous utiliserez les drapeaux dans votre projet.

Le mode icône fonctionne avec un ou plusieurs pays sélectionnés, mais une grille de quatre drapeaux ou plus donne généralement une disposition sprite plus utile. Le mode drapeau unique fonctionne lorsque vous n'avez besoin que d'un pays ou d'un petit ensemble de fichiers séparés.

Conserver le ratio et Définir la taille de l'image fonctionnent ensemble. Lorsque le verrouillage du ratio est activé, modifier la largeur ou la hauteur met à jour l'autre dimension pour que les drapeaux restent proportionnels.

• Rapport d'aspect 4:3 : Une forme courante de type drapeau pour icônes compactes et éléments de liste.
• Rapport d'aspect 16:9 : Un cadre plus large lorsque vous voulez des miniatures en format paysage.
• Désactivez Conserver le ratio lorsque vous avez besoin d'une largeur et d'une hauteur personnalisées qui ne correspondent pas à ces préréglages.

Les limites de taille dépendent du type d'image. Le mode icône garde chaque drapeau petit (environ 15px à 100px de large) pour que le sprite combiné reste gérable. Le mode drapeau unique autorise des largeurs plus grandes (environ 15px à 1000px) pour l'affichage ou le téléchargement. La hauteur suit les mêmes règles de mode.

Après avoir généré un sprite d'icônes, le panneau d'aperçu vous permet d'affiner la disposition des drapeaux sur le canevas avant de télécharger ou copier le code.

• Ligne et colonnes : Contrôlez combien de drapeaux apparaissent en largeur et en hauteur dans la grille du sprite.
• Espacement des lignes et espacement des colonnes : Ajoutez des espaces horizontaux ou verticaux entre les cellules de drapeau.
• Padding : Ajoutez de l'espace autour du bord extérieur de l'image combinée.
• Rayon : Adoucissez les coins des drapeaux avec un découpage arrondi pour des icônes plus douces.
• Ajuster la taille de l'aperçu : Adaptez un canevas large à la page pour examiner le sprite complet.
• Mettre à jour : Reconstruisez le canevas après des changements de disposition pour que les positions restent synchronisées avec le CSS généré.
• Code drapeau : Copiez le HTML et le CSS générés depuis la section Code drapeau. Chaque pays sélectionné obtient une classe iso_XX avec un background-position correspondant sur le sprite partagé.
• Télécharger l'image : Exportez uniquement le sprite PNG généré lorsque vous avez déjà votre propre HTML et CSS, ou n'avez besoin que de la ressource image.
• Télécharger zip : Exportez flag-icons.png avec le HTML et CSS générés dans un zip pour que le package sprite complet reste synchronisé.

Gardez le canevas total sous les limites maximales de largeur et de hauteur affichées par l'outil. Les grilles très grandes peuvent dépasser la taille d'image autorisée ; réduisez les lignes, colonnes ou la taille d'icône si vous voyez un avertissement de taille. Après avoir modifié l'espacement ou la taille, mettez à jour l'aperçu avant de copier le CSS ou de télécharger le zip pour que les positions restent exactes.

En mode créer des icônes de drapeaux, la section Code drapeau génère du code prêt à coller qui pointe vers une image sprite. Chaque pays utilise une classe partagée flags_img plus une classe ISO comme iso_AF qui définit le décalage de fond exact pour cette cellule de drapeau.

L'exemple HTML associe une boîte de drapeau au libellé du pays. L'exemple CSS définit la ligne flex, la taille partagée du sprite et une règle par code ISO. Votre sortie en direct se met à jour pour correspondre aux pays et à la disposition que vous avez sélectionnés.

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

Placez flag-icons.png à côté de votre CSS (ou mettez à jour le chemin url()), puis collez le HTML et CSS dans votre page. Préférez Télécharger zip lorsque vous voulez l'image, le HTML et le CSS comme un package assorti. Modifier les lignes, l'espacement ou la taille d'icône change les décalages en pixels, donc cliquez sur Mettre à jour et copiez le Code drapeau actualisé ou retéléchargez le zip après des changements de disposition.

Les icônes de drapeaux de pays apparaissent dans de nombreuses surfaces de produit. Voici des endroits courants pour utiliser les images de cet outil.

• Commutateurs de langue et de région dans les en-têtes de sites web
• Champs de sélection de pays à côté des formulaires de téléphone ou d'adresse
• Localisateurs de magasins, options d'expédition et listes de pays au checkout
• Tableaux de bord qui regroupent analyses ou utilisateurs par pays
• Écrans de paramètres d'applications mobiles affichant les locales disponibles
• Pages marketing mettant en avant les marchés pris en charge
• Listes sprite CSS affichant un drapeau à côté de chaque nom de pays depuis une seule requête PNG

Associez des icônes de drapeau à un menu déroulant de noms de pays ou une liste JSON de pays lorsque vous avez aussi besoin de codes ISO et de libellés dans le balisage ou les données d'application. Les liens connexes sont listés dans la section outils connexes.

Réponses aux questions courantes sur le téléchargement de drapeau unique, les sprites d'icônes, les positions background-position CSS, le rapport d'aspect, les limites de taille, les options de disposition et les drapeaux SVG connexes.

Besoin de drapeaux SVG, de balisage de menu déroulant de pays ou de données pays dans un autre format ? Ces pages couvrent des flux de travail proches.

• Téléchargement de drapeaux de pays SVG pour drapeaux vectoriels évolutifs et code SVG.
• Menu déroulant HTML de noms de pays pour listes select avec codes ISO et libellés.
• Tableau JavaScript de noms de pays pour listes de pays en JSON et objets.
• Tableau PHP de noms de pays pour données pays côté serveur.
• Hub d'outils image pour autres pages de téléchargement et conversion d'images.
• Convertisseur image vers WebP lorsque vous voulez optimiser des PNG de drapeaux exportés.