The Phosphor medal icon depicts a rosette or award, commonly used to signify achievement, winning, or recognition in user interfaces.
Common uses
- Displaying user achievements or badges.
- Indicating a winning status in a game.
- Representing a top-rated item or service.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Medal } from '@phosphor-icons/react';
<Medal size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Medal size={24} />thin
<Medal size={24} weight="thin" />light
<Medal size={24} weight="light" />bold
<Medal size={24} weight="bold" />fill
<Medal size={24} weight="fill" />duotone
<Medal size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- objects
- Keywords
- ribbonswinningvictoryawardsrosetteobjectsgamesmedalawardribbontrophybadge
FAQ
- What is the medal icon used for?
- It's used to represent awards, victories, or achievements. It can also signify recognition or a winning status.
- How do I use the medal icon in React?
- You can import and use it like this: import { Medal } from '@phosphor-icons/react'. Then render it as <Medal />.
- What is the license for the Phosphor medal icon?
- The Phosphor icon library, including the medal 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 →