What does the file png icon represent?

It represents a file in the PNG (Portable Network Graphics) format, typically used for images and graphics.

How do I use the file png icon in React?

You can import and use it like this: import { FilePng } from '@phosphor-icons/react'. Then render it as .

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

Phosphor · file-png · MIT

The Phosphor file png icon depicts a standard PNG file format, commonly used to represent images and graphics in user interfaces.

Install

npm i @phosphor-icons/react

Import & render

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

<FilePng size={24} />

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

regular

<FilePng size={24} />

thin

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

light

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

bold

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

fill

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

duotone

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

Library: Phosphor (1,512 icons)
License: MIT
viewBox: 0 0 256 256
Category: office
Keywords: documentspicturesphotographofficeeditormediafilepngimage filepicture filepng imagedocument png

What does the file png icon represent?: It represents a file in the PNG (Portable Network Graphics) format, typically used for images and graphics.
How do I use the file png icon in React?: You can import and use it like this: import { FilePng } from '@phosphor-icons/react'. Then render it as <FilePng />.
What is the license for this icon?: The Phosphor icon library, including the file png 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 →