The Heroicons photo icon depicts a stylized image, commonly used to represent photo galleries, image uploads, or media content.
Common uses
- Image upload button
- Gallery view toggle
- Media library access
Use it in React
Install
npm i @heroicons/reactImport & render
import { PhotoIcon } from '@heroicons/react/24/outline';
<PhotoIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<PhotoIcon className="size-6" />24/solid
<PhotoIcon className="size-6" />20/solid
<PhotoIcon className="size-6" />16/solid
<PhotoIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- photoimagepicturegallerymedia
FAQ
- What does the photo icon represent?
- It represents an image or photograph, suitable for indicating photo-related features or content.
- How do I use the photo icon in React?
- Import it using: import { PhotoIcon } from '@heroicons/react/24/outline'. Then use it as a React component: <PhotoIcon className="h-6 w-6" />.
- What is the license for Heroicons?
- Heroicons are available under the MIT license, allowing for free use in both personal and commercial projects.
Related icons
The same idea in other libraries, and near matches in Heroicons.
Looking for something else? Search Heroicons 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 →