flag-icons
A set of country flag images in SVG, plus CSS to show them easily on web pages.
- Stars
- 12.5k
- Forks
- 2k
- Licence
- MIT
- Language
- HTML
- Last update
- 5 days ago
- Type
- Library
What it is
flag-icons is a collection of SVG images of country flags, along with CSS that makes them simple to add to a website. You add a small class such as fi fi-gr to an empty span and the matching flag appears, using ISO 3166-1 alpha-2 country codes to pick the flag. It is mainly useful for web projects that show flags next to country names or in lists.
- Show a flag beside each country in a form's country dropdown
- Display flags inline with text using the fi and fi-xx classes
- Include only selected countries in the CSS by listing them in the SASS configuration
- Load the stylesheet from jsDelivr in a plain HTML page
Great for
- Web developers who need flags next to country names in a site or app
- Teams that want a consistent flag style without sourcing images themselves
- Projects that only need a subset of flags and want to trim the CSS with SASS settings
- People who prefer loading styles from a CDN without installing anything
Not ideal for
- Projects that need flag images only in non-web formats such as PNG for mobile apps, since the README covers SVG and CSS only
- Anyone wanting a ready-made app; this is a set of assets and styles, not a program
How to get it
- 1
Install with a package manager
You'll need: Node.js or Yarn (only if installing via npm or Yarn)
Install via npm
npm install flag-iconsInstall via Yarn
yarn add flag-icons - 2
Run it
- Install the package with npm or Yarn, or include the CDN stylesheet link in your page
- Import css/flag-icons.min.css into your project or add the stylesheet link to your HTML
- Add an empty span with the classes fi and fi-gr to show the Greek flag
- Add the fis class as well to get a square version of the flag
- 3
Get the most out of it
- Use the SASS version with $flag-icons-included-countries to include only the countries you need
- Change $flag-icons-path in SASS to control where flag files are loaded from
- Apply the fib class to any element instead of a span when you need the flag as a background
- Use the flag-icon-squared class with a background element to get a square flag
Downloads
Strengths
- Covers all country flags in a single, consistent SVG set
- Simple class-based usage with ISO country codes
- Can be trimmed to only the flags you need through SASS configuration
Trade-offs
- The README does not say how the flags are styled beyond size and layout, so visual customization details are unclear
- Flags are sized by the surrounding element, so you must set dimensions yourself for the flags to look right
- The README's CDN example pins an older version (7.3.2) while the latest release is v7.6.0
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| flag-icons (this) | 12.5k | Library | beginner | 5 days ago | Web developers who need flags next to country names in a site or app |
| anime | 74.2k | Library | beginner | 3 months ago | Front-end developers adding motion to websites or web apps |
| tabler-icons | 22.5k | App | beginner | 8 days ago | Web developers who need a consistent set of icons for buttons, menus, and dashboards |
| bootstrap | 175k | Library | beginner | 4 days ago | Developers building responsive websites or web app interfaces quickly |
| tailwindcss | 98.3k | Library | intermediate | 4 days ago | Web developers who build their own interfaces and want to avoid writing large custom stylesheets |
| normalize.css | 53.5k | Library | beginner | 2.4 years ago | Front-end developers who want a consistent starting point across browsers |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.