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"></i>
<i class="chi-flag-icon icon-au"></i>
<i class="chi-flag-icon icon-br"></i>
<i class="chi-flag-icon icon-co"></i>
<i class="chi-flag-icon icon-de"></i>
<i class="chi-flag-icon icon-hk"></i>
<i class="chi-flag-icon icon-in"></i>
<i class="chi-flag-icon icon-jp"></i>
<i class="chi-flag-icon icon-mx"></i>
<i class="chi-flag-icon icon-sg"></i>
<i class="chi-flag-icon icon-gb"></i>
<i class="chi-flag-icon icon-us"></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"></i>
<!-- -sm : 24x16px -->
<i class="chi-flag-icon icon-us -sm"></i>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon