What does the file tsx icon represent?

It represents a file with the TSX extension, which is used for writing React components in TypeScript.

How do I use this icon in a React project?

You can import and use it in your React project with the following statement: import { FileTsx } from '@phosphor-icons/react'.

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

Phosphor · file-tsx · MIT

The Phosphor file tsx icon depicts a document with the TSX file extension, commonly used to represent TypeScript React files in user interfaces.

Install

npm i @phosphor-icons/react

Import & render

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

<FileTsx size={24} />

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

regular

<FileTsx size={24} />

thin

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

light

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

bold

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

fill

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

duotone

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

Library: Phosphor (1,512 icons)
License: MIT
viewBox: 0 0 256 256
Category: office
Keywords: documentscodetypescriptofficeeditortechnology & developmentfiletsxtypescript react filetsx documentcode filereact tsx

What does the file tsx icon represent?: It represents a file with the TSX extension, which is used for writing React components in TypeScript.
How do I use this icon in a React project?: You can import and use it in your React project with the following statement: import { FileTsx } from '@phosphor-icons/react'.
What is the license for this icon?: The Phosphor icon library, including the file tsx 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 →