Flag icon

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

Examples

Country/Region

Icon
Name
Class

Argentina

icon--ar

Australia

icon--au

Brazil

icon--br

Colombia

icon--co

Germany

icon--de

Hong Kong

icon--hk

India

icon--in

Japan

icon--jp

Mexico

icon--mx

Singapore

icon--sg

United Kingdom

icon--gb

United States

icon--us
<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-br" aria-hidden="true"></i>
<i class="chi-flag-icon icon-co" 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-jp" aria-hidden="true"></i>
<i class="chi-flag-icon icon-mx" aria-hidden="true"></i>
<i class="chi-flag-icon icon-sg" 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>

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