Skip to content

yammadev/flag-icons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

flag-icons CO

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

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.