Länderflaggen-Bilder und Icon-Sprites herunterladen

Nutzen Sie den Generator unten, um Länder auszuwählen, Einzelflaggen oder ein kombiniertes Icon-Bild zu wählen, Seitenverhältnis und Größe festzulegen und Länderflaggen zu erzeugen und herunterzuladen. Die Funktionsliste unten erklärt jedes Steuerelement, die Anleitung unten zeigt die empfohlene Reihenfolge.

Die Steuerelemente auf dieser Seite decken Massenauswahl, Flaggenstil, Ausgabetyp, Größe, Layout und Export ab. Das sind die wichtigsten Optionen beim Erstellen von Flaggenbildern.

• Ländernamen auswählen: Wählen Sie aus der vollständigen Liste, filtern Sie nach Kontinent (Afrika, Antarktis, Asien, Europa, Australien, Nordamerika, Südamerika), suchen Sie nach Namen oder markieren und demarkieren Sie Zeilen nach Bedarf.
• Ländercodes einfügen: Öffnen Sie den Einfügedialog und wählen Sie Länder per JavaScript-Array (z. B. ['US', 'GB', 'DE']), einer zeilengetrennten Liste mit einem ISO-Code pro Zeile oder einem getrennten String wie CSV mit Komma, Doppelpunkt, Semikolon, Tab oder eigenem Trennzeichen. Nur gültige Codes werden auf die Tabelle angewendet; ungültige Einträge werden vor Apply gemeldet.
• Flaggenstil: Wählen Sie wellige Flaggen mit Welleneffekt oder flache Flaggen mit rechteckigem Standardlook, bevor Sie Einzelflaggen-Downloads oder ein Icon-Sprite erzeugen.
• Länderreihenfolge mischen: Zufällige Reihenfolge der Länder im Sprite-Raster. ISO-Klassennamen wie iso_US bleiben gleich; nur die Position jeder Flagge auf dem canvas ändert sich.
• Bildtyp auswählen: Download single flag für separate skalierte Bilder oder create icon flags, um alle ausgewählten Länderflaggen in ein Bild zu legen.
• Keep ratio: Breite und Höhe auf 4:3 oder 16:9 sperren oder die Sperre deaktivieren für eigene Maße.
• Bildgröße festlegen: Breite und Höhe pro Flagge eingeben. Limits unterscheiden sich für Einzelflaggen- und Icon-Modus, damit Sprites klein bleiben und Einzeldownloads größer sein können.
• Bild erzeugen: Skalierte Flaggen oder das kombinierte Icon-canvas aus Ihrer Auswahl erstellen.
• Raster automatisch anpassen: Nach der Icon-Erzeugung Zeilen und Spalten anhand der Anzahl ausgewählter Länder berechnen lassen, statt sie manuell festzulegen.
• Globus-Icon: Globus-Platzhalter für Länder ohne Flaggenbild in der Sprite-Vorschau anzeigen.
• PNG, ZIP und JSON exportieren: Nur das erzeugte PNG herunterladen, ein ZIP-Archiv mit flag-icons.png plus passenden HTML- und CSS-Dateien oder eine JSON-Datei mit Sprite-Positionen und Ländermetadaten für React, canvas und andere App-Workflows.
• Flaggen-Code: Nach der Icon-Erzeugung HTML und CSS aus dem Bereich Flaggen-Code kopieren. Die Ausgabe nutzt eine Sprite-Datei (flag-icons.png) mit Klassen wie flags_img und iso_AF, jeweils mit der richtigen background-position für das Land.

Folgen Sie diesen Schritten, um Länderflaggen-Bilder mit den Optionen auf dieser Seite zu erstellen.

1. Wählen Sie die gewünschten Ländernamen. Nutzen Sie den Kontinentfilter oder das Suchfeld und markieren Sie nur die benötigten Zeilen.
2. Bildtyp auswählen: Download single flag für separate Dateien oder create icon flags für alle ausgewählten Flaggen in einem Bild.
3. Optional Keep ratio aktivieren und 4:3- oder 16:9-Seitenverhältnis wählen.
4. Bildgröße festlegen, indem Sie Breite und Höhe innerhalb der Limits für den gewählten Bildtyp eingeben.
5. Bild erzeugen. Download Image nur für das PNG, Download zip für Bild plus HTML und CSS in einer Datei oder HTML und CSS aus dem Bereich Flaggen-Code kopieren, ohne herunterzuladen.

Der Bildtyp steuert, ob Sie viele separate Dateien oder ein Sprite erhalten. Wählen Sie den Modus, der zu Ihrer geplanten Nutzung der Flaggen passt.

Der Icon-Modus funktioniert mit einem oder mehr ausgewählten Ländern, aber ein Raster mit vier oder mehr Flaggen ergibt meist ein nützlicheres Sprite-Layout. Der Einzelflaggen-Modus funktioniert mit einem Land oder einer kleinen Menge separater Dateien.

Keep ratio und Bildgröße festlegen arbeiten zusammen. Bei aktiver Ratio-Sperre passt sich die andere Seite an, wenn Sie Breite oder Höhe ändern, damit Flaggen proportional bleiben.

• 4:3-Seitenverhältnis: Eine häufige flaggenähnliche Form für kompakte Icons und Listeneinträge.
• 16:9-Seitenverhältnis: Ein breiterer Rahmen für landscape-artige Vorschaubilder.
• Deaktivieren Sie Keep ratio, wenn Sie eigene Breite und Höhe außerhalb dieser Vorgaben brauchen.

Größenlimits hängen vom Bildtyp ab. Der Icon-Modus hält jede Flagge klein (ca. 15px bis 100px breit), damit das kombinierte Sprite handhabbar bleibt. Der Einzelflaggen-Modus erlaubt größere Breiten (ca. 15px bis 1000px) für Anzeige- oder Download-Assets. Höhenlimits folgen denselben Modusregeln.

Nach dem Erzeugen eines Icon-Sprites können Sie im Vorschaubereich feinjustieren, wie Flaggen auf dem canvas liegen, bevor Sie herunterladen oder Code kopieren.

• Zeile und Spalten: Steuern, wie viele Flaggen horizontal und vertikal im Sprite-Raster liegen.
• Zeilenabstand und Spaltenabstand: Horizontale oder vertikale Abstände zwischen Flaggenzellen.
• Padding: Abstand um den äußeren Rand des kombinierten Bildes.
• Radius: Flaggen-Ecken mit abgerundetem Clip weicher machen.
• Vorschaubild an Fenster anpassen: Breites canvas in die Seite einpassen, um das volle Sprite zu prüfen.
• Aktualisieren: canvas nach Layoutänderungen neu aufbauen, damit Positionen mit dem erzeugten CSS übereinstimmen.
• Flaggen-Code: Kopieren Sie das erzeugte HTML und CSS aus dem Bereich Flaggen-Code. Jedes ausgewählte Land erhält eine iso_XX-Klasse mit passender background-position auf dem gemeinsamen Sprite.
• Download Image: Nur das erzeugte PNG-Sprite exportieren, wenn Sie eigenes HTML und CSS haben oder nur das Bild brauchen.
• Download zip: flag-icons.png zusammen mit erzeugtem HTML und CSS in einem ZIP exportieren, damit das komplette Sprite-Paket synchron bleibt.

Halten Sie die Gesamt-canvas unter den maximalen Breiten- und Höhenlimits des Tools. Sehr große Raster können die erlaubte Bildgröße überschreiten; reduzieren Sie Zeilen, Spalten oder Icon-Größe bei einer Größenwarnung. Nach Abstands- oder Größenänderungen die Vorschau erneut aktualisieren, bevor Sie CSS kopieren oder das ZIP laden, damit Positionen korrekt bleiben.

Im Modus create icon flags erstellt der Bereich Flaggen-Code einsatzbereiten Code, der auf ein Sprite-Bild verweist. Jedes Land nutzt eine gemeinsame flags_img-Klasse plus eine ISO-Klasse wie iso_AF, die den exakten Background-Offset für die Flaggenzelle setzt.

Das HTML-Beispiel kombiniert eine Flaggenbox mit dem Ländernamen. Das CSS-Beispiel definiert die Flex-Zeile, die gemeinsame Sprite-Größe und eine Regel pro ISO-Code. Ihre Live-Ausgabe passt sich den gewählten Ländern und dem Layout an.

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

Legen Sie flag-icons.png neben Ihr CSS (oder passen Sie den url()-Pfad an) und fügen Sie HTML und CSS in Ihre Seite ein. Nutzen Sie Download zip, wenn Sie Bild, HTML und CSS als ein passendes Paket wollen. Änderungen an Zeilen, Abständen oder Icon-Größe ändern die Pixel-Offsets - klicken Sie auf Update und kopieren Sie den aktualisierten Flaggen-Code oder laden Sie das ZIP nach Layoutänderungen erneut herunter.

Länderflaggen-Icons tauchen in vielen Produktbereichen auf. Das sind typische Einsatzorte für die Bilder aus diesem Tool.

• Sprach- und Regionsschalter in Website-Headern
• Länderauswahlfelder neben Telefon- oder Adressformularen
• Filialfinder, Versandoptionen und Checkout-Länderlisten
• Dashboards, die Analysen oder Nutzer nach Land gruppieren
• Mobile App-Einstellungen mit verfügbaren Locales
• Marketingseiten, die unterstützte Märkte hervorheben
• CSS-Sprite-Listen mit einer Flagge neben jedem Ländernamen aus einer PNG-Anfrage

Kombinieren Sie Flaggen-Icons mit einem Ländernamen-Dropdown oder einer JSON-Länderliste, wenn Sie auch ISO-Codes und Labels in Markup oder App-Daten brauchen. Verwandte Links stehen im Abschnitt Verwandte Tools.

Antworten auf häufige Fragen zu Einzelflaggen-Download, Icon-Sprites, CSS-background-position, Seitenverhältnis, Größenlimits, Layout-Optionen und zugehörigen SVG-Flaggen.

Brauchen Sie SVG-Flaggen, Dropdown-Markup für Länder oder Länderdaten in einem anderen Format? Diese Seiten decken nahe Workflows ab.

• SVG-Länderflaggen-Download für skalierbare Vektorflaggen und SVG-Code.
• HTML-Ländernamen-Dropdown für Select-Listen mit ISO-Codes und Labels.
• JavaScript-Ländernamen-Array für JSON- und Objekt-Länderlisten.
• PHP-Ländernamen-Array für serverseitige Länderdaten.
• Bild-Tools-Hub für weitere Bild-Download- und Konvertierungsseiten.
• Bild-zu-WebP-Konverter wenn Sie exportierte Flaggen-PNGs optimieren möchten.