What is the file icon used for?

This icon represents a document or file. It's typically used for actions like saving, opening, or managing files and documents within an application.

How do I use the file icon in React?

You can import and use it in your React components like this: import { File } from '@phosphor-icons/react'.

The Phosphor icon library, including the file icon, is available under the MIT license.

Phosphor · file · MIT

The Phosphor file icon depicts a document or page, commonly used in UIs to represent actions related to documents, saving, or file management.

Install

npm i @phosphor-icons/react

Import & render

import { File } from '@phosphor-icons/react';

<File size={24} />

Phosphor ships this icon in 6 styles — each its own import:

regular

<File size={24} />

thin

<File size={24} weight="thin" />

light

<File size={24} weight="light" />

bold

<File size={24} weight="bold" />

fill

<File size={24} weight="fill" />

duotone

<File size={24} weight="duotone" />

What is the file icon used for?: This icon represents a document or file. It's typically used for actions like saving, opening, or managing files and documents within an application.
How do I use the file icon in React?: You can import and use it in your React components like this: import { File } from '@phosphor-icons/react'.
What is the license for the Phosphor file icon?: The Phosphor icon library, including the file icon, is available under the MIT license.

The same idea in other libraries, and near matches in Phosphor.

The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →