Flag icon

Use Flag icon to render Lumen country/region flag icons in your project.

Examples

Country/Region

Icon
Name
Class

Base

Argentina

icon--ar

Australia

icon--au

Belgium

icon--be

Brazil

icon--br

Canada

icon--ca

Chile

icon--cl

China

icon--cn

Colombia

icon--co

Ecuador

icon--ec

France

icon--fr

Germany

icon--de

Hong Kong

icon--hk

India

icon--in

Ireland

icon--ie

Italy

icon--it

Japan

icon--jp

Mexico

icon--mx

Netherlands

icon--nl

Peru

icon--pe

Singapore

icon--sg

Spain

icon--es

United Kingdom

icon--gb

United States

icon--us

Venezuela

icon--ve
<i class="chi-flag-icon" aria-hidden="true"></i>
<i class="chi-flag-icon icon-ar" aria-hidden="true"></i>
<i class="chi-flag-icon icon-au" aria-hidden="true"></i>
<i class="chi-flag-icon icon-be" aria-hidden="true"></i>
<i class="chi-flag-icon icon-br" aria-hidden="true"></i>
<i class="chi-flag-icon icon-ca" aria-hidden="true"></i>
<i class="chi-flag-icon icon-cl" aria-hidden="true"></i>
<i class="chi-flag-icon icon-cn" aria-hidden="true"></i>
<i class="chi-flag-icon icon-co" aria-hidden="true"></i>
<i class="chi-flag-icon icon-ec" aria-hidden="true"></i>
<i class="chi-flag-icon icon-fr" aria-hidden="true"></i>
<i class="chi-flag-icon icon-de" aria-hidden="true"></i>
<i class="chi-flag-icon icon-hk" aria-hidden="true"></i>
<i class="chi-flag-icon icon-in" aria-hidden="true"></i>
<i class="chi-flag-icon icon-ie" aria-hidden="true"></i>
<i class="chi-flag-icon icon-it" aria-hidden="true"></i>
<i class="chi-flag-icon icon-jp" aria-hidden="true"></i>
<i class="chi-flag-icon icon-mx" aria-hidden="true"></i>
<i class="chi-flag-icon icon-nl" aria-hidden="true"></i>
<i class="chi-flag-icon icon-pe" aria-hidden="true"></i>
<i class="chi-flag-icon icon-sg" aria-hidden="true"></i>
<i class="chi-flag-icon icon-es" aria-hidden="true"></i>
<i class="chi-flag-icon icon-gb" aria-hidden="true"></i>
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
<i class="chi-flag-icon icon-ve" aria-hidden="true"></i>

Sizes

Flag icons support the following sizes: -xs, -sm. By default, flag icons render at 24x16px (-sm).

xs

sm

<!-- -xs : 18x12px -->
<i class="chi-flag-icon icon-us -xs" aria-hidden="true"></i>
<!-- -sm : 24x16px -->
<i class="chi-flag-icon icon-us -sm" aria-hidden="true"></i>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon