Flag of Berlin

Looking to quickly add flag of Berlin to your project? Copy-paste the stylesheet <link> into your <head>. Need to download the source files? → Head to the downloads page.

<link rel="stylesheet" href="https://media.zeise.cloud/vector-flag-icons/css/vfi.min.css" />

… or insert compress CSS snippet in your stylesheet, if you need the flag of Berlin and some styles only.

/*!
 * Vector Flag Icons v2 (https://zeise.cloud/vector-flag-icons/)
 * Copyright 2001-2018 Christian Zeise
 * Copyright 2004-2018 Pottval Media
 * Copyright 2017-2018 Zeise Media
 * Licensed under MIT (https://zeise.cloud/vector-flag-icons/#license)
 */
/*! Vector Flag Icons — Flag of Berlin */
.fl-de-be::before{background-image:url("https://media.zeise.cloud/vector-flag-icons/images/de-be.svg");background-position:center;background-repeat:no-repeat;background-size:100% 100%;background-size:contain;content:"";display:inline-block;height:.75em;overflow:hidden;position:relative;line-height:0!important;vertical-align:baseline;width:1.25em}
.fl-border::before{box-shadow:0 0 0 .1rem rgba(0,0,0,.125)}.fl-border-dark::before,.fl-border.fl-border-dark::before{box-shadow:0 0 0 .1rem rgba(0,0,0,.725)}.fl-border-light::before,.fl-border.fl-border-light::before{box-shadow:0 0 0 .1rem rgba(255,255,255,.725)}
.fl-circle.fl-de-be::before{background-position:center;border-radius:.75em;width:.75em!important}
.fl-extend.fl-de-be::before{width:1.5em!important}
.fl-radius::before,.fl-radius.fl-x1::before,.fl-radius.fl-x2::before{border-radius:3px}.fl-radius.fl-x3::before,.fl-radius.fl-x4::before{border-radius:6px}.fl-radius.fl-x5::before,.fl-radius.fl-x6::before{border-radius:12px}
.fl-shadow.fl-de-be::before{box-shadow:0 1px 5px rgba(0,0,0,.5)}
.fl-square.fl-de-be::before{background-position:center;width:.75em!important}
.fl-fw.fl-de-be::before{width:1.5em!important}
.fl-x1::before,.fl-x2::before,.fl-x3::before,.fl-x4::before,.fl-x5::before,.fl-x6::before{line-height:0!important;vertical-align:middle}.fl-x1::before{font-size:.84rem}.fl-x2::before{font-size:2rem}.fl-x3::before{font-size:3rem}.fl-x4::before{font-size:4rem}.fl-x5::before{font-size:5rem}.fl-x6::before{font-size:6rem}
<i class="fl fl-de-be"></i>

This is the result within original flag proportional relationship. The flag of Berlin has an aspect ratio (height to width ratio) of 3:5.

You can place Vector Flag Icons just about anywhere using the CSS class prefix fl and the flag's code fl-de-be. Vector Flag Icons are designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct — as with Font Awesome too ✌️).

<i class="fl fl-de-be fl-circle"></i>
<i class="fl fl-de-be fl-radius"></i>
<i class="fl fl-de-be fl-square"></i>
<i class="fl fl-de-be fl-radius fl-square"></i>
<i class="fl fl-de-be"></i>
<i class="fl fl-de-be fl-x2"></i>
<i class="fl fl-de-be fl-x3"></i>
<i class="fl fl-de-be fl-x4"></i>
<i class="fl fl-de-be fl-x5"></i>