flag-icons
:flags: A curated collection of all country flags in SVG — plus the CSS for easier integration
Top Related Projects
SVG and PNG renders of all countries' flags.
Beautiful flag icons for usage in apps and on the web.
Quick Overview
The lipis/flag-icons repository is a collection of SVG flags for countries, territories, and organizations worldwide. It provides a comprehensive set of flag icons that can be easily integrated into web projects, offering both square and rectangular versions of each flag.
Pros
- Extensive collection of flags, including countries, territories, and organizations
- High-quality SVG format ensures scalability without loss of quality
- Offers both square and rectangular versions of flags
- Easy integration with web projects using CSS classes
Cons
- Large file size when using the entire collection, which may impact load times
- Some lesser-known flags or territories might be missing or outdated
- Requires manual updates to stay current with flag changes
Code Examples
- Using a flag icon in HTML:
<span class="fi fi-us"></span>
This code displays the United States flag using the appropriate CSS class.
- Styling flag icons with CSS:
.fi {
width: 2em;
height: 1.5em;
margin-right: 0.5em;
}
This CSS snippet sets a standard size for flag icons and adds some margin.
- Using flag icons with custom sizes:
<span class="fi fi-jp fis-3x"></span>
This code displays the Japanese flag at 3 times the default size using the fis-3x class.
Getting Started
- Install the package using npm:
npm install flag-icons
- Import the CSS file in your project:
<link rel="stylesheet" href="path/to/css/flag-icons.min.css">
- Use flag icons in your HTML:
<span class="fi fi-gr"></span> <!-- Greece flag -->
<span class="fi fi-ca"></span> <!-- Canada flag -->
Competitor Comparisons
SVG and PNG renders of all countries' flags.
Pros of country-flags
- Offers a wider variety of flag formats, including SVG, PNG, and WEBP
- Includes more flags, covering dependencies and territories
- Provides flags in multiple sizes for better flexibility
Cons of country-flags
- Less frequently updated compared to flag-icons
- Lacks CSS sprite functionality for easy implementation
- Does not offer flag icons as font icons
Code Comparison
flag-icons usage:
<span class="fi fi-gr"></span>
<i class="flag-icon flag-icon-gr"></i>
country-flags usage:
<img src="svg/gr.svg" alt="Greece Flag">
<img src="png100px/gr.png" alt="Greece Flag">
Both repositories provide easy-to-use flag icons, but they differ in implementation and available formats. flag-icons focuses on CSS and font icon integration, making it more suitable for web developers looking for quick implementation. country-flags offers more variety in file formats and sizes, which can be beneficial for projects requiring specific flag representations or higher resolution images.
While flag-icons is more actively maintained and offers streamlined CSS integration, country-flags provides a broader selection of flags and formats. The choice between the two depends on the specific needs of the project, such as required file formats, desired implementation method, and the range of flags needed.
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 both square and rectangular flag versions for versatility
- Provides Sketch and Figma design resources for easy integration
Cons of FlagKit
- Smaller collection of flags (around 250) compared to flag-icons (over 260)
- Less frequent updates and maintenance
- Limited CSS and web-specific integration options
Code Comparison
FlagKit (Swift):
import FlagKit
let flag = Flag(country: .us)
imageView.image = flag.image
flag-icons (HTML/CSS):
<span class="fi fi-us"></span>
Additional Notes
FlagKit is primarily designed for iOS and macOS development, offering native integration with Swift and Objective-C projects. It provides high-quality vector flags but may require additional work for web integration.
flag-icons, on the other hand, is more web-focused, offering easy CSS-based implementation and a wider range of country flags. It's regularly updated and maintained, making it a popular choice for web developers.
Both projects serve different primary use cases, with FlagKit excelling in native app development and flag-icons being more suitable for web-based projects.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
flag-icons
A curated collection of all country flags in SVG â plus the CSS for easier integration. See the demo.
Install
You can either download the whole project as is or install it via npm or Yarn:
npm install flag-icons
# or
yarn add flag-icons
Usage
First, you need to import css:
import "/node_modules/flag-icons/css/flag-icons.min.css";
or use CDN:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css"
/>
For using the flags inline with text add the classes .fi and .fi-xx (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty <span>. If you want to have a squared version flag then add the class fis as well. Example:
<span class="fi fi-gr"></span> <span class="fi fi-gr fis"></span>
You could also apply this to any element, but in that case you'll have to use the fib instead of fi and you're set. This will add the correct background with the following CSS properties:
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
Which means that the flag is just going to appear in the middle of an element, so you will have to set manually the correct size of 4 by 3 ratio or if it's squared add also the flag-icon-squared class.
Development
Run the yarn to install the dependencies after cloning the project and you'll be able to:
To build *.scss files
$ yarn build
To serve it on localhost:8000
$ yarn start
To have only specific countries in the css file, remove the ones that you don't need from the _flag-icons-list.scss file and build it again.
Credits
- This project wouldn't exist without the awesome and now deleted collection of SVG flags by koppi.
- Thank you Andrejs Abrickis for providing the
flag-iconsname on npm.
Top Related Projects
SVG and PNG renders of all countries' flags.
Beautiful flag icons for usage in apps and on the web.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot