The Phosphor flag icon depicts a rectangular flag, commonly used to represent countries, languages, or status indicators in user interfaces.
Common uses
- Displaying the selected country in a dropdown.
- Indicating the language of a website or application.
- Marking an item as 'completed' or 'finished'.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Flag } from '@phosphor-icons/react';
<Flag size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Flag size={24} />thin
<Flag size={24} weight="thin" />light
<Flag size={24} weight="light" />bold
<Flag size={24} weight="bold" />fill
<Flag size={24} weight="fill" />duotone
<Flag size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- objects
- Keywords
- countrycountriesfinishedcompletedflagsobjectsmaps & travelsystemflagnationstatus
FAQ
- What is the flag icon used for?
- It's typically used to represent countries, languages, or to signify a completed status.
- How do I use the flag icon in React?
- You can import and use it like this: import { Flag } from '@phosphor-icons/react'.
- What is the license for the Phosphor flag icon?
- The Phosphor icon library, including the flag icon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →