Awesome

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:

Countries

253 flags:

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.