Unduh Gambar Bendera Negara dan Sprite Ikon

Gunakan generator di bawah untuk memilih negara, memilih bendera tunggal atau gambar ikon gabungan, menetapkan rasio aspek dan ukuran, lalu membuat dan mengunduh gambar bendera negara. Lihat daftar fitur di bawah untuk setiap kontrol, dan langkah cara pakai di bawah untuk urutan yang disarankan.

Kontrol di halaman ini mencakup pemilihan massal, gaya bendera, jenis output, ukuran, tata letak, dan ekspor. Berikut opsi utama yang tersedia saat Anda membuat gambar bendera.

• Pilih nama negara: Pilih dari daftar lengkap, filter berdasarkan benua (Afrika, Antartika, Asia, Eropa, Australia, Amerika Utara, Amerika Selatan), cari berdasarkan nama, atau centang dan hapus centang baris sesuai kebutuhan.
• Tempel kode negara: Buka dialog tempel dan pilih negara secara massal dari array JavaScript (misalnya ['US', 'GB', 'DE']), daftar terpisah per baris dengan satu kode ISO per baris, atau string terpisah seperti CSV dengan koma, titik dua, titik koma, tab, atau pemisah kustom. Hanya kode valid yang diterapkan ke tabel; entri tidak valid dilaporkan sebelum Anda klik Apply.
• Gaya bendera: Pilih bendera bergelombang dengan efek riak atau bendera datar dengan tampilan persegi panjang standar sebelum Anda membuat unduhan bendera tunggal atau sprite ikon.
• Acak urutan negara: Acak urutan negara muncul di grid sprite. Nama kelas ISO seperti iso_US tetap sama; hanya posisi setiap bendera di kanvas yang berubah.
• Pilih Jenis Gambar: Download single flag untuk gambar terpisah yang diubah ukurannya, atau create icon flags untuk menempatkan semua bendera negara terpilih dalam satu gambar.
• Keep ratio: Kunci lebar dan tinggi ke rasio aspek 4:3 atau 16:9, atau matikan kunci untuk dimensi kustom.
• Atur ukuran gambar: Masukkan lebar dan tinggi untuk setiap bendera. Batas berbeda untuk mode bendera tunggal dan ikon agar sprite tetap kecil dan unduhan tunggal bisa lebih besar.
• Buat gambar: Bangun bendera yang diubah ukurannya atau kanvas ikon gabungan dari pilihan Anda.
• Grid otomatis: Setelah membuat ikon, biarkan alat menghitung baris dan kolom dari jumlah negara terpilih alih-alih mengaturnya secara manual.
• Ikon Globe: Menampilkan penanda globe untuk negara tanpa gambar bendera di pratinjau sprite.
• Ekspor PNG, zip, dan JSON: Unduh PNG yang dibuat saja, arsip zip dengan flag-icons.png plus file HTML dan CSS yang cocok, atau file JSON dengan posisi sprite dan metadata negara untuk React, canvas, dan alur kerja aplikasi lainnya.
• Kode bendera: Setelah pembuatan ikon, salin HTML dan CSS dari bagian Kode bendera. Output menggunakan satu file sprite (flag-icons.png) dengan kelas seperti flags_img dan iso_AF, masing-masing dengan background-position yang benar untuk negara tersebut.

Ikuti langkah-langkah ini untuk membuat gambar bendera negara dengan opsi di halaman ini.

1. Pilih nama negara yang Anda inginkan. Gunakan filter benua atau kotak pencarian, lalu centang hanya baris yang Anda butuhkan.
2. Pilih Jenis Gambar: Download single flag untuk file terpisah, atau create icon flags untuk semua bendera terpilih dalam satu gambar.
3. Opsional: aktifkan Keep ratio dan pilih rasio aspek 4:3 atau 16:9.
4. Atur ukuran gambar dengan memasukkan lebar dan tinggi dalam batas untuk jenis gambar yang Anda pilih.
5. Buat gambar. Gunakan Download Image untuk PNG saja, Download zip untuk gambar + HTML + CSS dalam satu file, atau salin HTML dan CSS dari bagian Kode bendera tanpa mengunduh.

Jenis Gambar mengontrol apakah Anda mendapat banyak file terpisah atau satu sprite. Pilih mode yang sesuai dengan cara Anda menggunakan bendera dalam proyek.

Mode ikon berfungsi dengan satu atau lebih negara terpilih, tetapi grid dengan empat bendera atau lebih biasanya memberi tata letak sprite yang lebih berguna. Mode bendera tunggal berfungsi saat Anda hanya membutuhkan satu negara atau set kecil file terpisah.

Keep ratio dan Atur ukuran gambar bekerja bersama. Saat kunci rasio aktif, mengubah lebar atau tinggi memperbarui sisi lainnya agar bendera tetap proporsional.

• Rasio aspek 4:3: Bentuk mirip bendera yang umum untuk ikon kompak dan item daftar.
• Rasio aspek 16:9: Bingkai lebih lebar saat Anda menginginkan thumbnail gaya lanskap.
• Matikan Keep ratio saat Anda membutuhkan lebar dan tinggi kustom yang tidak cocok dengan preset tersebut.

Batas ukuran bergantung pada Jenis Gambar. Mode ikon mempertahankan setiap bendera kecil (kira-kira 15px hingga 100px lebar) agar sprite gabungan tetap mudah dikelola. Mode bendera tunggal mengizinkan lebar lebih besar (kira-kira 15px hingga 1000px) untuk aset tampilan atau unduhan. Tinggi mengikuti aturan mode yang sama.

Setelah Anda membuat sprite ikon, panel pratinjau memungkinkan Anda menyempurnakan posisi bendera di kanvas sebelum mengunduh atau menyalin kode.

• Baris dan Kolom: Kontrol berapa banyak bendera muncul melintang dan menurun di grid sprite.
• Row space dan Col space: Tambahkan jarak horizontal atau vertikal antar sel bendera.
• Padding: Tambahkan ruang di tepi luar gambar gabungan.
• Radius: Lembutkan sudut bendera dengan klip membulat saat Anda menginginkan ikon yang lebih halus.
• Sesuaikan ukuran pratinjau gambar: Sesuaikan kanvas lebar ke halaman agar Anda dapat meninjau sprite penuh.
• Perbarui: Bangun ulang kanvas setelah perubahan tata letak agar posisi tetap selaras dengan CSS yang dibuat.
• Kode bendera: Salin HTML dan CSS yang dibuat dari bagian Kode bendera. Setiap negara terpilih mendapat kelas iso_XX dengan background-position yang cocok pada sprite bersama.
• Download Image: Ekspor hanya PNG sprite yang dibuat saat Anda sudah memiliki HTML dan CSS sendiri, atau hanya membutuhkan aset gambar.
• Download zip: Ekspor flag-icons.png bersama HTML dan CSS yang dibuat dalam satu zip agar paket sprite penuh tetap selaras.

Jaga total kanvas di bawah batas lebar dan tinggi maksimum yang ditampilkan alat. Grid yang sangat besar dapat melebihi ukuran gambar yang diizinkan; kurangi baris, kolom, atau ukuran ikon jika Anda melihat peringatan ukuran. Setelah Anda mengubah jarak atau ukuran, perbarui pratinjau lagi sebelum menyalin CSS atau mengunduh zip agar posisi tetap akurat.

Dalam mode create icon flags, bagian Kode bendera membuat kode siap tempel yang menunjuk ke satu gambar sprite. Setiap negara menggunakan kelas flags_img bersama plus kelas ISO seperti iso_AF yang menetapkan offset background yang tepat untuk sel bendera tersebut.

Contoh HTML memasangkan kotak bendera dengan label negara. Contoh CSS mendefinisikan baris flex, ukuran sprite bersama, dan satu aturan per kode ISO. Output live Anda diperbarui agar cocok dengan negara dan tata letak yang Anda pilih.

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

Tempatkan flag-icons.png di samping CSS Anda (atau perbarui path url()), lalu tempel HTML dan CSS ke halaman Anda. Pilih Download zip jika Anda ingin gambar, HTML, dan CSS sebagai satu paket yang cocok. Mengubah baris, jarak, atau ukuran ikon mengubah offset piksel, jadi klik Perbarui dan salin Kode bendera yang diperbarui atau unduh ulang zip setelah mengubah tata letak.

Ikon bendera negara muncul di banyak permukaan produk. Berikut tempat umum untuk menggunakan gambar dari alat ini.

• Pengalih bahasa dan wilayah di header situs web
• Field pilih negara di samping formulir telepon atau alamat
• Pencari toko, opsi pengiriman, dan daftar negara checkout
• Dashboard yang mengelompokkan analitik atau pengguna berdasarkan negara
• Layar pengaturan aplikasi mobile yang menampilkan locale yang tersedia
• Halaman pemasaran yang menonjolkan pasar yang didukung
• Daftar sprite CSS yang menampilkan bendera di samping setiap nama negara dari satu permintaan PNG

Pasangkan ikon bendera dengan dropdown nama negara atau daftar negara JSON saat Anda juga membutuhkan kode ISO dan label dalam markup atau data aplikasi. Tautan terkait tercantum di bagian alat terkait.

Jawaban untuk pertanyaan umum tentang unduhan bendera tunggal, sprite ikon, posisi background CSS, rasio aspek, batas ukuran, opsi tata letak, dan bendera SVG terkait.

Butuh bendera SVG, markup dropdown negara, atau data negara dalam format lain? Halaman ini mencakup alur kerja terkait.

• Unduh bendera negara SVG untuk bendera vektor yang dapat diskalakan dan kode SVG.
• Dropdown nama negara HTML untuk daftar select dengan kode ISO dan label.
• Array nama negara JavaScript untuk daftar negara JSON dan objek.
• Array nama negara PHP untuk data negara sisi server.
• Pusat alat gambar untuk halaman unduh dan konversi gambar lainnya.
• Konverter gambar ke WebP saat Anda ingin mengoptimalkan PNG bendera yang diekspor.