Flag icon
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