Avris Flags
Flags on websites made easy!


  1. Get the CSS + PNG
  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 }} flag-outbound"></span>
Upload images
Upload image files (max 100 KB, max 128x128 px). Their filenames will serve as country codes. If they conflict with regular flags, the custom files will take precedence.