What is the document icon used for?

It's typically used to signify files, documents, or content within an application's interface.

How do I use the document icon in React?

Import it using `import { DocumentIcon } from '@heroicons/react/24/outline'` and then use it as a React component.

The Heroicons library, including the document icon, is available under the MIT license.

Heroicons · document · MIT

The Heroicons document icon depicts a sheet of paper, commonly used to represent files, documents, or content in user interfaces.

Install

npm i @heroicons/react

Import & render

import { DocumentIcon } from '@heroicons/react/24/outline';

<DocumentIcon className="size-6" />

Heroicons ships this icon in 4 styles — each its own import:

24/outline

<DocumentIcon className="size-6" />

24/solid

<DocumentIcon className="size-6" />

20/solid

<DocumentIcon className="size-6" />

16/solid

<DocumentIcon className="size-6" />

What is the document icon used for?: It's typically used to signify files, documents, or content within an application's interface.
How do I use the document icon in React?: Import it using `import { DocumentIcon } from '@heroicons/react/24/outline'` and then use it as a React component.
What is the license for this icon?: The Heroicons library, including the document icon, is available under the MIT license.

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

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