How do I change the size of a flag in flag-icons?

You need to set the width and height manually via CSS, as the flags use background images; for example, add a custom class to adjust dimensions based on the 4:3 ratio or squared style.

flag-icons vs country-flags npm package: which is better?

flag-icons offers a comprehensive SVG collection with CSS integration, while country-flags might provide different formats; flag-icons is better for straightforward CSS-based usage, but compare bundle sizes and features for your needs.

Can I use flag-icons with React or Vue?

Yes, you can import the CSS and use the classes in JSX or templates, but for component-based usage, you might need to create wrappers to handle dynamic changes or accessibility.

How to add alt text for accessibility with flag-icons?

Since flags are background images, add aria-label or title attributes to the HTML elements, e.g., , to improve screen reader support.

Does flag-icons include flags for all countries?

Yes, it covers all countries using ISO 3166-1-alpha-2 codes, as stated in the README, and is regularly updated to reflect changes.

How to customize flag-icons with SASS to reduce file size?

Install via npm, then import the SASS file and set variables like $flag-icons-included-countries to include only specific flags, then rebuild the CSS using the provided yarn build command.

Open-Awesome

Country Icons

MITHTMLv7.5.0

A curated collection of all country flags in SVG format with CSS for easy web integration.

Visit Website GitHub

12.1k stars1.9k forks0 contributors

What is Country Icons?

flag-icons is an open-source CSS and SVG library that provides a curated collection of all country flags for web developers. It solves the problem of sourcing and styling national flags by offering ready-to-use, scalable SVG assets with accompanying CSS classes for easy integration into websites and applications.

Target Audience

Frontend developers and web designers who need to display country flags in user interfaces, such as for language selectors, location indicators, or internationalized content.

Value Proposition

Developers choose flag-icons for its comprehensive, high-quality SVG flag collection, simple CSS-based integration, and customization options via SASS, eliminating the need to manually handle flag assets and styling.

Overview

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

Use Cases

Best For

Adding country flags to language selection dropdowns
Displaying user nationality or location in profile pages
Building internationalized applications with flag indicators
Creating travel or geography-related websites
Implementing flag-based filters or sorting interfaces
Enhancing UI for multi-region e-commerce platforms

Not Ideal For

Applications requiring animated or interactive flag displays
Projects needing flags for non-country entities like states or organizations
Teams using component-based frameworks that prefer inline SVG markup over CSS backgrounds

Pros & Cons

Pros

Complete Flag Coverage

Includes high-quality SVG flags for every country based on ISO 3166-1-alpha-2 codes, eliminating the need to source assets individually.

Simple CSS Integration

Provides ready-to-use classes like .fi-gr for easy inline implementation, handling background styling automatically without manual CSS work.

SASS Customization

Allows selective inclusion of specific countries and path overrides through SASS variables, as shown in the README, reducing bundle size.

CDN Availability

Can be loaded directly from a CDN for quick setup without local installation, simplifying deployment.

Cons

Accessibility Limitations

Flags are implemented as CSS background images, which lack built-in alt text for screen readers, requiring additional HTML attributes for accessibility.

Build Step for Optimization

To include only specific flags, developers must use SASS and rebuild the CSS, adding complexity compared to drop-in solutions.

Limited Styling Flexibility

Relies on background properties, making it harder to apply advanced CSS effects or animations without overriding default styles.

Frequently Asked Questions

Related Projects

material-design-icons

Material Design icons by Google (Material Symbols)

Stars53,161

Forks9,728

Last commit7 days ago

Font Custom

Generate custom icon webfonts from the comfort of the command line.

Stars3,296

Forks420

Last commit3 months ago

FontAwesomeKit

Icon font library for iOS. Currently supports Font-Awesome, Foundation icons, Zocial, and ionicons.

Stars2,805

Forks308

Last commit5 years ago

Iconic

A minimal set of icons in raster, vector and font formats — free for public use.

Stars2,347

Forks335

Last commit6 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub