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