Convert Figma logo to code with AI

hampusborgos logocountry-flags

SVG and PNG renders of all countries' flags.

3,389
965
3,389
39
View on GitHub

Top Related Projects

hampusborgos's avatar

country-flags

3,390

SVG and PNG renders of all countries' flags.

lipis's avatar

flag-icons

10,572

:flags: A curated collection of all country flags in SVG — plus the CSS for easier integration

madebybowtie's avatar

FlagKit

3,028

Beautiful flag icons for usage in apps and on the web.

Quick Overview

The hampusborgos/country-flags repository is a comprehensive collection of SVG and PNG flags for countries and territories worldwide. It provides high-quality, standardized flag images in various sizes and formats, making it a valuable resource for developers and designers working on projects that require country flag representations.

Pros

  • Extensive collection of flags for countries and territories
  • Available in both SVG and PNG formats for versatility
  • Multiple sizes provided for PNG flags (16px, 24px, 32px, 48px, 64px)
  • Regularly updated to reflect changes in national flags

Cons

  • Some lesser-known territories or disputed regions may have incomplete or outdated flags
  • No built-in API or programming interface for easy integration
  • Limited additional metadata or information about the flags
  • Manual download and integration required for most projects

Getting Started

Since this is not a code library but a collection of image files, there's no specific code-based getting started process. However, here are some basic steps to use the flags in your project:

  1. Clone or download the repository:

    git clone https://github.com/hampusborgos/country-flags.git

  2. Choose the desired format (SVG or PNG) and size (for PNG).

  3. Copy the flag files you need to your project's assets folder.

  4. Reference the flag images in your HTML, CSS, or other project files as needed.

Example HTML usage:

<img src="path/to/flags/svg/us.svg" alt="United States Flag">

or

<img src="path/to/flags/png/64/fr.png" alt="France Flag">

Remember to adjust the path according to your project's file structure.

Competitor Comparisons

hampusborgos logo

country-flags

3,390

SVG and PNG renders of all countries' flags.

Pros of country-flags

  • Comprehensive collection of country flags in various formats
  • Regular updates and maintenance
  • Well-organized directory structure

Cons of country-flags

  • Large repository size due to multiple flag formats
  • May include outdated or less commonly used flags

Code comparison

Not applicable, as both repositories are the same and contain flag image files rather than code.

Summary

The comparison between country-flags and itself doesn't yield any meaningful differences, as they are the same repository. country-flags is a popular resource for developers and designers who need access to a wide range of country flags in different formats. It offers SVG, PNG, and other file types for each flag, making it versatile for various applications.

The repository's strengths lie in its comprehensive collection and regular updates. However, the inclusion of multiple formats for each flag results in a larger repository size, which may be a consideration for some users.

Overall, country-flags serves as a valuable resource for projects requiring high-quality, standardized country flag images across different file formats.

lipis logo

flag-icons

10,572

:flags: A curated collection of all country flags in SVG — plus the CSS for easier integration

Pros of flag-icons

  • Offers multiple formats (SVG, PNG, CSS sprites) for flexibility
  • Includes both square and rectangular versions of flags
  • Provides a wider variety of flags, including subdivisions and organizations

Cons of flag-icons

  • Larger repository size due to multiple formats and variations
  • May require more setup and configuration for specific use cases
  • Some users report occasional inconsistencies in flag designs

Code Comparison

country-flags:

<img src="https://raw.githubusercontent.com/hampusborgos/country-flags/main/png100px/us.png" alt="US Flag">

flag-icons:

<span class="fi fi-us"></span>

Additional Notes

Both repositories provide high-quality flag images for various countries. country-flags focuses on simplicity and ease of use, offering a straightforward collection of PNG and SVG files. flag-icons, on the other hand, provides more options and formats, making it suitable for diverse project requirements.

The choice between these repositories depends on specific project needs, such as desired file formats, flag variations, and implementation preferences. country-flags may be more suitable for quick integration, while flag-icons offers more flexibility and options for customization.

madebybowtie logo

FlagKit

3,028

Beautiful flag icons for usage in apps and on the web.

Pros of FlagKit

  • Offers vector-based SVG flags, providing better scalability and quality
  • Includes a wider variety of flag styles (e.g., rounded, square, circular)
  • Provides design resources for multiple platforms (iOS, Android, Web)

Cons of FlagKit

  • Has fewer flags in the collection compared to country-flags
  • Less frequently updated, potentially missing newer flag designs
  • Larger file sizes due to the vector-based format

Code Comparison

FlagKit usage (Swift):

let flag = FlagKit.flag(for: "US")
imageView.image = flag

country-flags usage (HTML):

<img src="https://raw.githubusercontent.com/hampusborgos/country-flags/main/png100px/us.png" alt="US Flag">

Summary

FlagKit offers high-quality vector flags with multiple styles, making it ideal for projects requiring scalable flag images across different platforms. However, it has a smaller collection and less frequent updates. country-flags provides a more extensive collection of raster-based flags, which are lighter in file size but may not scale as well. The choice between the two depends on specific project requirements, such as scalability needs, platform support, and the variety of flags required.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Accurate country flags

This repository contains accurate renders of all the worlds flags in SVG and PNG format.

View all of the flags here: https://hampusborgos.github.io/country-flags/

We make every effort to maintain the most accurate repository of flags. That is, flags that most closely match what the country or territory's laws and regulations describe the flags as being.

The source files were taken from Wikimedia Commons and sometimes contributed back (when the country legislation more accurately describes what the flag should look like). The flags are not under copyright protection since flags are in public domain (there may be other restrictions on how the flag can be used though).

Flags are organized by "ISO country-code"

The flags are named by their 2-letter ISO-3166 country code, except for the constituent countries of Great Britain which have 6-letter codes "GB-ENG" etc).

Kosovo uses the user-assigned country code XK, which is not part of the ISO standard, but in use by several multinational organizations.

Also included is a JSON file that maps the ISO country code to the name of the country.

Get the flags

You can download this repository. Or you can clone it. You can also view all the flags here.

You can also install this as a NPM module:

npm install --save svg-country-flags

Exporting to pngs

In addition to the the SVG "sources" for all flags, we've also provided PNG exports of the SVG renderings in 100px, 250px, and 1000px widths. If you're still using PNGs (SVGs are scalable, after all), and the pre-rendered versions don't fit your needs, use the following methods to get different widths:

Arbitrary Width

You can run the node script 'build-pngs', you must first install the modules svgexport and imagemin-cli:

npm install -g svgexport imagemin-cli
npm run build-pngs -- 1000:

Replace 1000: with whatever width you want (note the :), or type :200 to get PNGs with a height of 200px.

Arbitrary Width Manually

If you cannot run the node script above, you can do the same steps manually.

Use a combination of svgexport and imagemin-cli from NPM to get that. imagemin is very important because svgexport produces uncompressed PNGs which are several MB each.

Run the following commands in the svg/ directory to get PNGs of a desired width:

for file in *.svg; do svgexport $file "`basename $file svg`png" pad 1000: ; done
imagemin *.png --out-dir=../compressed-pngs/
rm *.png

The resultant files will be in the compressed-pngs folder. As before, 1000: is the dimensions to export.