The Phosphor image icon depicts a stylized representation of a picture or photograph, commonly used in UI to indicate actions related to viewing, uploading, or managing media files.
Common uses
- Image gallery thumbnail
- Upload button
- Media settings option
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Image } from '@phosphor-icons/react';
<Image size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Image size={24} />thin
<Image size={24} weight="thin" />light
<Image size={24} weight="light" />bold
<Image size={24} weight="bold" />fill
<Image size={24} weight="fill" />duotone
<Image size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- media
- Keywords
- *updated*picturesphotographsphotographywallpapersgallerylandscapemediasystemimagepicturephoto
FAQ
- What is the Phosphor image icon used for?
- It represents a picture or photograph and is used in interfaces for actions like displaying images, uploading files, or navigating media galleries.
- How do I use the image icon in React?
- You can import and use it directly in your React components like this: import { Image } from '@phosphor-icons/react'.
- What is the license for the Phosphor image icon?
- The Phosphor icon library, including the image 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 →