flag-icons

A beautiful svg + png + sass + css collection of 261 flags by Yefferson Marín.

Icons

All sketch files were pulled from madebybowtie/FlagKit.

Looking for brand icons?

Check out yammadev/brand-icons.

Author

Yefferson Marín - (@yammadev)

Instructions

1. Add the compiled css file to your html.

  <!-- Use generated lib -->
  <link rel="stylesheet" href="/css/flag-icons.css">

  <!-- Or compressed -->
  <link rel="stylesheet" href="/css/flag-icons.min.css">

2. Download the svg (folder) icons in your path.

3. Use <i> or <span> tags adding the class flag-icons followed of the flag code (look Reference bellow for details) which is the ISO 3166-1-alpha-2 code for each one. The result is a rectangular flag, however, the square class can be used if a squared one is required:

  <!-- Using <i> -->
  <i class="flag-icons CO"></i>
  <i class="flag-icons square CO"></i>

  <!-- Using <span> -->
  <span class="flag-icons CO"></span>
  <span class="flag-icons square CO"></span>

4. You can also format the default size of the flag in a custom css file:

  .flag-icons,    /* Format default wrapper */
  .rectangle {    /* Or use as new class */
    height: 2em !important;
    width: 2.66667em !important;
    line-height: 2em !important;
  }

  .flag-icons,    /* Format default wrapper */
  .square,        /* Format default square class */
  .squared {      /* Or use as new class */
    height: 2em !important;
    width: 2em !important;
    line-height: 2em !important;
  }

  <!-- Rectangle -->
  <i class="flag-icons CO"></i>
  <i class="flag-icons rectangle CO"></i>

  <!-- Square -->
  <i class="flag-icons CO"></i>
  <i class="flag-icons square CO"></i>
  <i class="flag-icons squared CO"></i>

Use a portion

Simple

1. From svg folder get just the flags you need

2 Edit the library css/flag-icons.css by just leaving the classes for the selected flags.

3. Use as explained before.

Building your own

Requirements

• NPM
• SASS

1. In svg folder put just the files you need, and then edit sass/_variables.sass, where 'code' represents the name(s) of the desired flag(s).

  // ...
  $flags: (
    'code'
    ...
    'code'
  )

2. Run in terminal:

  # Install dependencies
  $ npm install

  # Build!
  $ grunt build

3. It will generate:

  /css    <-- .css, .min.css

4. Use as usual.

Contribute

Issues and pull requests are most than welcome.

License

Released under the MIT license.

Reference

Extras

8 flags:

Flag	Code	Region
	CAF	Africa
	CAS	Asia
	CNA	North America
	COC	Oceania
	CSA	South America
	EU	European Union
	WW	World
	LGBT	Pride

Countries

253 flags:

Flag	Code	Region
	AD	Andorra
	AE	United Arab Emirates
	AF	Afghanistan
	AG	Antigua & Barbuda
	AI	Anguilla
	AL	Albania
	AM	Armenia
	AO	Angola
	AR	Argentina
	AS	American Samoa
	AT	Austria
	AU	Australia
	AW	Aruba
	AX	Åland Islands
	AZ	Azerbaijan
	BA	Bosnia & Herzegovina
	BB	Barbados
	BD	Bangladesh
	BE	Belgium
	BF	Burkina Faso
	BG	Bulgaria
	BH	Bahrain
	BI	Burundi
	BJ	Benin
	BL	St. Barthélemy
	BM	Bermuda
	BN	Brunei
	BO	Bolivia
	BR	Brazil
	BS	Bahamas
	BT	Bhutan
	BV	Bouvet Island
	BW	Botswana
	BY	Belarus
	BZ	Belize
	CA	Canada
	CC	Cocos (Keeling) Islands
	CD	Congo - Kinshasa
	CF	Central African Republic
	CG	Congo - Brazzaville
	CH	Switzerland
	CI	Côte d’Ivoire
	CK	Cook Islands
	CL	Chile
	CM	Cameroon
	CN	China
	CO	Colombia
	CR	Costa Rica
	CU	Cuba
	CV	Cape Verde
	CW	Curaçao
	CX	Christmas Island
	CY	Cyprus
	CZ	Czech Republic
	DE	Germany
	DJ	Djibouti
	DK	Denmark
	DM	Dominica
	DO	Dominican Republic
	DZ	Algeria
	EC	Ecuador
	EE	Estonia
	EG	Egypt
	ER	Eritrea
	ES	Spain
	ET	Ethiopia
	FI	Finland
	FJ	Fiji
	FK	Falkland Islands
	FM	Micronesia
	FO	Faroe Islands
	FR	France
	GA	Gabon
	GB	United Kingdom
	GB-ENG	England
	GB-NIR	Northern Ireland
	GB-SCT	Scotland
	GB-WLS	Wales
	GB-ZET	Shetland
	GD	Grenada
	GE	Georgia
	GF	French Guiana
	GG	Guernsey
	GH	Ghana
	GI	Gibraltar
	GL	Greenland
	GM	Gambia
	GN	Guinea
	GP	Guadeloupe
	GQ	Equatorial Guinea
	GR	Greece
	GS	So. Georgia & So. Sandwich Isl.
	GT	Guatemala
	GU	Guam
	GW	Guinea-Bissau
	GY	Guyana
	HK	Hong Kong (China)
	HM	Heard & McDonald Islands
	HN	Honduras
	HR	Croatia
	HT	Haiti
	HU	Hungary
	ID	Indonesia
	IE	Ireland
	IL	Israel
	IM	Isle of Man
	IN	India
	IO	British Indian Ocean Territory
	IQ	Iraq
	IR	Iran
	IS	Iceland
	IT	Italy
	JE	Jersey
	JM	Jamaica
	JO	Jordan
	JP	Japan
	KE	Kenya
	KG	Kyrgyzstan
	KH	Cambodia
	KI	Kiribati
	KM	Comoros
	KN	St. Kitts & Nevis
	KP	North Korea
	KR	South Korea
	KW	Kuwait
	KY	Cayman Islands
	KZ	Kazakhstan
	LA	Laos
	LB	Lebanon
	LC	St. Lucia
	LI	Liechtenstein
	LK	Sri Lanka
	LR	Liberia
	LS	Lesotho
	LT	Lithuania
	LU	Luxembourg
	LV	Latvia
	LY	Libya
	MA	Morocco
	MC	Monaco
	MD	Moldova
	ME	Montenegro
	MF	St. Martin
	MG	Madagascar
	MH	Marshall Islands
	MK	Macedonia
	ML	Mali
	MM	Myanmar (Burma)
	MN	Mongolia
	MO	Macau (China)
	MP	Northern Mariana Islands
	MQ	Martinique
	MR	Mauritania
	MS	Montserrat
	MT	Malta
	MU	Mauritius
	MV	Maldives
	MW	Malawi
	MX	Mexico
	MY	Malaysia
	MZ	Mozambique
	NA	Namibia
	NC	New Caledonia
	NE	Niger
	NF	Norfolk Island
	NG	Nigeria
	NI	Nicaragua
	NL	Netherlands
	NO	Norway
	NP	Nepal
	NR	Nauru
	NU	Niue
	NZ	New Zealand
	OM	Oman
	PA	Panama
	PE	Peru
	PF	French Polynesia
	PG	Papua New Guinea
	PH	Philippines
	PK	Pakistan
	PL	Poland
	PM	St. Pierre & Miquelon
	PN	Pitcairn Islands
	PR	Puerto Rico
	PS	Palestinian Territories
	PT	Portugal
	PW	Palau
	PY	Paraguay
	QA	Qatar
	RE	Réunion
	RO	Romania
	RS	Serbia
	RU	Russia
	RW	Rwanda
	SA	Saudi Arabia
	SB	Solomon Islands
	SC	Seychelles
	SD	Sudan
	SE	Sweden
	SG	Singapore
	SH	St. Helena
	SI	Slovenia
	SJ	Svalbard & Jan Mayen
	SK	Slovakia
	SL	Sierra Leone
	SM	San Marino
	SN	Senegal
	SO	Somalia
	SR	Suriname
	SS	South Sudan
	ST	São Tomé & Príncipe
	SV	El Salvador
	SX	Sint Maarten
	SY	Syria
	SZ	Swaziland
	TC	Turks & Caicos Islands
	TD	Chad
	TF	French Southern Territories
	TG	Togo
	TH	Thailand
	TJ	Tajikistan
	TK	Tokelau
	TL	Timor-Leste
	TM	Turkmenistan
	TN	Tunisia
	TO	Tonga
	TR	Turkey
	TT	Trinidad & Tobago
	TV	Tuvalu
	TW	Taiwan
	TZ	Tanzania
	UA	Ukraine
	UG	Uganda
	UM	U.S. Outlying Islands
	US	United States
	US-CA	California
	UY	Uruguay
	UZ	Uzbekistan
	VA	Vatican City
	VC	St. Vincent & Grenadines
	VE	Venezuela
	VG	British Virgin Islands
	VI	U.S. Virgin Islands
	VN	Vietnam
	VU	Vanuatu
	WF	Wallis & Futuna
	WS	Samoa
	XK	Kosovo
	YE	Yemen
	YT	Mayotte
	ZA	South Africa
	ZM	Zambia
	ZW	Zimbabwe

Changelog

All notable changes to this project are documented in this part of the file. The format is based on Keep a Changelog.

[x.y.z] - YYYY-MM-DD

• x for major release related to major additions or changes.
• y for minor release related to minor additions or changes in current major release.
• z for minor release related to minor additions or changes in current minor release.

Extras

• Added for new features.
• Modified for changes in existing functionality.
• Deprecated for soon-to-be removed features.
• Removed for removed features.
• Fixed for any bug fixes.
• Security in case of vulnerabilities.

[3.0.0] - 2020-04-15

Modified

• Title + Description in _config.yml.

[3.0.0] - 2020-04-14

Added

• More flags! (svg and png)

Modified

• sass files.
• Better instructions in readme.
• Tables rendering problem in readme based on this issue / in _config.yml.
• Code cleaning.
• readme edited.

Security

• Removed some packages with vulnerabilities.

[2.3.1] - 2020-03-16

Modified

• Still trying to solve tables problem in github page view.

[2.0.2] - 2020-03-16

Modified

• Trying to solve tables problem in github page view.

[2.0.1] - 2020-03-16

Modified

• Minimal changes.

[2.0.0] - 2020-03-16

Added

• Github page added using jekyll-theme-cayman.

Modified

• Tables modified in readme.
• Dependencies updated.

Security

• Security issues solved.

[1.2.4] - 2017-07-09

Modified

• Code cleaning.
• readme edited.

[1.2.3] - 2017-06-27

Modified

• readme edited.

[1.2.3] - 2017-06-27

Modified

• readme edited.

[1.2.2] - 2017-06-27

Modified

• Link to ISO 3166-1-alpha-2 code updated.
• readme edited.

[1.2.1] - 2017-06-27

Modified

• readme edited.

[1.2.0] - 2017-06-27

Added

• grunt integrated for better and cleaner approach.
• png flags.

Modified

• readme edited.

[1.1.0] - 2017-06-26

Modified

• sass better approach.
• Better instructions in readme.

[1.0.0] - 2017-06-26

Added

• svg flags.
• sass boilerplate.
• css libraries.

[0.0.0] - 2017-06-26

Added

• Initial commit.
• readme + license.