The Phosphor ranking icon depicts a tiered list or trophy, commonly used to represent leaderboards, competition results, or achievement levels in user interfaces.
Common uses
- Displaying player rankings on a leaderboard.
- Indicating a user's achievement or score tier.
- Representing a 'top performers' section.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Ranking } from '@phosphor-icons/react';
<Ranking size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Ranking size={24} />thin
<Ranking size={24} weight="thin" />light
<Ranking size={24} weight="light" />bold
<Ranking size={24} weight="bold" />fill
<Ranking size={24} weight="fill" />duotone
<Ranking size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- games
- Keywords
- *new*medalrankleaderboardwinnersportsgamesobjectsrankingtrophyachievement
FAQ
- What is the ranking icon used for?
- It's used to visually represent concepts like leaderboards, competition, or achievement levels.
- How do I use the ranking icon in React?
- You can import and use it like this: `import { Ranking } from '@phosphor-icons/react'`. Then render it as `<Ranking />`.
- What is the license for the Phosphor ranking icon?
- The Phosphor icon library, including the ranking 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 →