Avris Flags

Avris Flags
Flags on websites made easy!

  1. Get the CSS + PNG
    • You can either download the pre-generated zip,
    • use npm: npm i --save avris-flags
    • or use our generator to optimize the library by selecting only necessary flags and their size.
  2. Include the CSS in the <head> section.

    <link rel="stylesheet" href="/path/to/avris-flags.css"/>

  3. Put the an element with class flag-* wherever you with to see a flag, for instance:

    <span class="flag-DE"></span> →

  4. Adjust the flag to your needs.
    • The icon is always 1em high, so to resize it, just wrap it with an element with a specific font-size.
    • Add any custom CSS you wish (like the shadow above).
    • Check out the Options & examples section for built in adjustments.
<span class="flag-{{ code }}"></span>
Upload images
Upload image files (max 500 KB, max 640x640 px). Their filenames will be used as country codes. If they conflict with regular flags, the custom files will take precedence.