Country symbol
Country symbols display an icon that represents the flag of a country or territory. You can use country symbols individually or as a complete package. The country symbols are abstractly stylized, so users are more likely to recognize them at smaller sizes. Though we maintain their character within the circular form, we also provide rectangular "sharp" versions for every country symbol.
We include all countries and subdivisions that appear in the International Organization for Standardization (ISO) 3166-1 standard. Though we use the country names, alpha-2 codes and corresponding alphabetical order from ISO, our symbols derive from whichever flag the official United Nations list provides for each country. Of the 249 countries currently in the ISO list, 193 are sovereign states with UN membership. We also include the EU symbol, due to its economic importance.
Import and use each country symbol individually.
Import and use the rectangular version of each country symbol individually using the _Sharp suffix (e.g. TT becomes TT_Sharp for the sharp variant).
You can change the size of each country symbol using the size property which acts as a multiplier for the base size, as described in the country symbol foundation. The base size of the country symbol is based on the active density as described in the size foundation.
The following example shows all the available country symbols. You can import each component individually using its respective country code.
For example, the country symbol for Belgium has the code BE, which you can import as follows:
When importing many country symbol components at once, such as with a list, you may not want all the components in your initial bundle size. Instead, you can lazily load the country symbol components using React Suspense, alongside the LazyCountrySymbol component. LazyCountrySymbol takes a code prop to load the appropriate country symbol component.
You can also use country symbol as a background image in CSS from "@salt-ds/countries/saltCountries.css" or "@salt-ds/countries/saltSharpCountries.css", then specify the country code prefixed with saltCountry- or saltCountrySharp-, e.g., saltCountry-AD, saltCountrySharp-GB-SCT.
We include all countries and subdivisions that appear in the International Organization for Standardization (ISO) 3166-1 standard. Though we use the country names, alpha-2 codes and corresponding alphabetical order from ISO, our symbols derive from whichever flag the official United Nations list provides for each country. Of the 249 countries currently in the ISO list, 193 are sovereign states with UN membership. We also include the EU symbol, due to its economic importance.
Import and use each country symbol individually.
Import and use the rectangular version of each country symbol individually using the _Sharp suffix (e.g. TT becomes TT_Sharp for the sharp variant).
You can change the size of each country symbol using the size property which acts as a multiplier for the base size, as described in the country symbol foundation. The base size of the country symbol is based on the active density as described in the size foundation.
The following example shows all the available country symbols. You can import each component individually using its respective country code.
For example, the country symbol for Belgium has the code BE, which you can import as follows:
When importing many country symbol components at once, such as with a list, you may not want all the components in your initial bundle size. Instead, you can lazily load the country symbol components using React Suspense, alongside the LazyCountrySymbol component. LazyCountrySymbol takes a code prop to load the appropriate country symbol component.
You can also use country symbol as a background image in CSS from "@salt-ds/countries/saltCountries.css" or "@salt-ds/countries/saltSharpCountries.css", then specify the country code prefixed with saltCountry- or saltCountrySharp-, e.g., saltCountry-AD, saltCountrySharp-GB-SCT.
We include all countries and subdivisions that appear in the International Organization for Standardization (ISO) 3166-1 standard. Though we use the country names, alpha-2 codes and corresponding alphabetical order from ISO, our symbols derive from whichever flag the official United Nations list provides for each country. Of the 249 countries currently in the ISO list, 193 are sovereign states with UN membership. We also include the EU symbol, due to its economic importance.
Import and use each country symbol individually.
Import and use the rectangular version of each country symbol individually using the _Sharp suffix (e.g. TT becomes TT_Sharp for the sharp variant).
You can change the size of each country symbol using the size property which acts as a multiplier for the base size, as described in the country symbol foundation. The base size of the country symbol is based on the active density as described in the size foundation.
The following example shows all the available country symbols. You can import each component individually using its respective country code.
For example, the country symbol for Belgium has the code BE, which you can import as follows:
When importing many country symbol components at once, such as with a list, you may not want all the components in your initial bundle size. Instead, you can lazily load the country symbol components using React Suspense, alongside the LazyCountrySymbol component. LazyCountrySymbol takes a code prop to load the appropriate country symbol component.
You can also use country symbol as a background image in CSS from "@salt-ds/countries/saltCountries.css" or "@salt-ds/countries/saltSharpCountries.css", then specify the country code prefixed with saltCountry- or saltCountrySharp-, e.g., saltCountry-AD, saltCountrySharp-GB-SCT.