The Heroicons film icon depicts a classic movie reel, commonly used to represent media, video playback, or content related to movies and cinema.
Common uses
- Play/pause button for video
- Link to a movie details page
- Section for film reviews or recommendations
Use it in React
Install
npm i @heroicons/reactImport & render
import { FilmIcon } from '@heroicons/react/24/outline';
<FilmIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<FilmIcon className="size-6" />24/solid
<FilmIcon className="size-6" />20/solid
<FilmIcon className="size-6" />16/solid
<FilmIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- filmmovievideocinemareel
FAQ
- What is the film icon used for?
- It represents media, video, or cinema-related content. It's often used for play buttons or links to movie information.
- How do I use the film icon in React?
- Import it using `import { FilmIcon } from '@heroicons/react/24/outline'` and then use it as a React component: `<FilmIcon className="h-6 w-6" />`.
- What is the license for the Heroicons film icon?
- The Heroicons library, including the film icon, is available under the MIT license.
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 →