The Phosphor tray icon visually represents a container or holder, often used to signify a place for items like incoming messages, downloaded files, or system notifications.
Common uses
- Notification center indicator
- Download manager access
- System tray item
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Tray } from '@phosphor-icons/react';
<Tray size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Tray size={24} />thin
<Tray size={24} weight="thin" />light
<Tray size={24} weight="light" />bold
<Tray size={24} weight="bold" />fill
<Tray size={24} weight="fill" />duotone
<Tray size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- office
- Keywords
- inboxmailboxbinofficecommunicationssystemtraynotifications
FAQ
- What does the tray icon represent?
- It depicts a tray, commonly used in user interfaces to hold or organize items such as notifications, downloads, or system elements.
- How do I use the tray icon in React?
- You can import and use it like this: import { Tray } from '@phosphor-icons/react'. Then render it as <Tray size={32} />.
- What is the license for the Phosphor tray icon?
- The Phosphor icon library, including the tray 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 →