Download Country Flag Images and Icon Sprites

Use the generator below to select countries, choose single flags or a combined icon image, set aspect ratio and size, then generate and download country flag images. See the feature list below for each control, and the how-to steps for the recommended order.

The controls on this page cover bulk selection, flag style, output type, sizing, layout, and export. These are the main options available while you build flag images.

• Select country names: Choose from the full list, filter by continent (Africa, Antarctica, Asia, Europe, Australia, North America, South America), search by name, or check and uncheck rows as needed.
• Paste country codes: Open the paste dialog and bulk-select countries from a JavaScript array (for example ['US', 'GB', 'DE']), a line-separated list with one ISO code per line, or a delimited string such as CSV with comma, colon, semicolon, tab, or a custom separator. Only valid codes are applied to the table; invalid entries are reported before you click Apply.
• Flag style: Choose wavy flags with a rippled wave effect or flat flags with a standard rectangular look before you generate single-flag downloads or an icon sprite.
• Shuffle country order: Randomize the order countries appear in the sprite grid. ISO class names such as iso_US stay the same; only each flag's position on the canvas changes.
• Select Image Type: Download single flag for separate resized images, or create icon flags to place all selected country flags in one image.
• Keep ratio: Lock width and height to a 4:3 or 16:9 aspect ratio, or turn the lock off for custom dimensions.
• Set image size: Enter width and height for each flag. Limits differ for single-flag and icon modes so sprites stay small and single downloads can be larger.
• Generate image: Build the resized flags or the combined icon canvas from your selection.
• Auto-fit grid: After icon generation, let the tool calculate rows and columns from the number of selected countries instead of setting them manually.
• Globe Icon: Show a globe placeholder for countries that do not have a flag image in the sprite preview.
• Export PNG, zip, and JSON: Download the generated PNG only, a zip archive with flag-icons.png plus matching HTML and CSS files, or a JSON file with sprite positions and country metadata for React, canvas, and other app workflows.
• Flag code: After icon generation, copy HTML and CSS from the Flag code section. The output uses one sprite file (flag-icons.png) with classes such as flags_img and iso_AF, each with the correct background-position for that country.

Follow these steps to create country flag images with the options on this page.

1. Select the country names you want. Use the continent filter or search box, then check only the rows you need.
2. Select Image Type: Download single flag for separate files, or create icon flags for all selected flags in one image.
3. Optionally enable Keep ratio and choose 4:3 Aspect ratio or 16:9 Aspect ratio.
4. Set image size by entering width and height within the limits for your chosen image type.
5. Generate the image. Use Download Image for the PNG only, Download zip for image + HTML + CSS in one file, or copy HTML and CSS from the Flag code section without downloading.

Image Type controls whether you get many separate files or one sprite. Pick the mode that matches how you will use the flags in your project.

Icon mode works with one or more selected countries, but a grid of four or more flags usually gives a more useful sprite layout. Single-flag mode works when you only need one country or a small set of separate files.

Keep ratio and Set image size work together. When the ratio lock is on, changing width or height updates the other side so flags stay proportional.

• 4:3 Aspect ratio: A common flag-like shape for compact icons and list items.
• 16:9 Aspect ratio: A wider frame when you want landscape-style thumbnails.
• Turn Keep ratio off when you need a custom width and height that do not match those presets.

Size limits depend on Image Type. Icon mode keeps each flag small (roughly 15px to 100px wide) so the combined sprite stays manageable. Single-flag mode allows larger widths (roughly 15px to 1000px) for display or download assets. Height follows the same mode rules.

After you generate an icon sprite, the preview panel lets you refine how flags sit on the canvas before you download or copy code.

• Row and Columns: Control how many flags appear across and down the sprite grid.
• Row space and Col space: Add horizontal or vertical gaps between flag cells.
• Padding: Add space around the outer edge of the combined image.
• Radius: Soften flag corners with a rounded clip when you want softer icons.
• Preview Image Fit Size: Fit a wide canvas into the page so you can review the full sprite.
• Update: Rebuild the canvas after layout changes so positions stay in sync with the generated CSS.
• Flag code: Copy the generated HTML and CSS from the Flag code section. Each selected country gets an iso_XX class with a matching background-position on the shared sprite.
• Download Image: Export only the generated PNG sprite when you already have your own HTML and CSS, or only need the image asset.
• Download zip: Export flag-icons.png together with the generated HTML and CSS in one zip so the full sprite package stays in sync.

Keep the total canvas under the maximum width and height limits shown by the tool. Very large grids can exceed the allowed image size; reduce rows, columns, or icon size if you see a size warning. After you change spacing or size, update the preview again before copying CSS or downloading the zip so positions stay accurate.

In create icon flags mode, the Flag code section builds ready-to-paste HTML and CSS that point at one sprite image. Each country uses a shared flags_img class plus an ISO class such as iso_AF that sets the exact background offset for that flag cell.

The HTML sample pairs a flag box with the country label. The CSS sample defines the flex row, the shared sprite size, and one rule per ISO code. Your live output updates to match the countries and layout you selected.

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

Place flag-icons.png next to your CSS (or update the url() path), then paste the HTML and CSS into your page. Prefer Download zip when you want the image, HTML, and CSS as one matching package. Changing rows, spacing, or icon size changes the pixel offsets, so click Update and copy fresh Flag code or re-download the zip after layout changes.

Country flag icons appear in many product surfaces. These are common places to use the images from this tool.

• Language and region switchers in website headers
• Country select fields next to phone or address forms
• Store locators, shipping options, and checkout country lists
• Dashboards that group analytics or users by country
• Mobile app settings screens that show available locales
• Marketing pages that highlight supported markets
• CSS sprite lists that show a flag beside each country name from one PNG request

Pair flag icons with a country names dropdown or JSON country list when you also need ISO codes and labels in markup or application data. Related links are listed in the related tools section.

Answers to common questions about single-flag download, icon sprites, CSS background positions, aspect ratio, size limits, layout options, and related SVG flags.

Need SVG flags, country dropdown markup, or country data in another format? These pages cover nearby workflows.

• SVG country flags download for scalable vector flags and SVG code.
• HTML country names dropdown for select lists with ISO codes and labels.
• JavaScript country names array for JSON and object country lists.
• PHP country names array for server-side country data.
• Image tools hub for other image download and conversion pages.
• Image to WebP converter when you want to optimize exported flag PNGs.