File Type Icon – React component

file.pdf
file.jpg
file.mp4
file.docx
file.xlsx
file.zip
file.tsx
file

"use client";

import { FileTypeIcon } from "@/siteplane/components/file-type-icon";

const files = [
  "file.pdf",
  "file.jpg",
  "file.mp4",
  "file.docx",
  "file.xlsx",
  "file.zip",
  "file.tsx",
  "file",
];

export default function Example() {
  return (
    <ul className="grid w-full max-w-md grid-cols-4 gap-y-5">
      {files.map((name) => (
        <li className="flex flex-col items-center gap-2" key={name}>
          <FileTypeIcon name={name} />
          <span className="text-muted-foreground text-xs">{name}</span>
        </li>
      ))}
    </ul>
  );
}

Installation

pnpm dlx shadcn@4.18.0 add @siteplane/file-type-icon

Complete the one-time setup first. Registry JSON lists source files and dependencies.

Usage

import { FileTypeIcon } from "@/siteplane/components/file-type-icon";

<FileTypeIcon name="file.pdf" />;

The icon is chosen from the file’s extension. Each type has its own glyph on a document sheet that follows the theme, and a label that shows the extension in capitals. The label color comes from the kit and depends on the type. PDFs are red, spreadsheets green, and slides and archives orange. Documents, images, vector files, video and audio take the accent. Code and files of an unknown type are gray. The colors follow the theme, and a brand override of the accent reaches the label.

PDFpdf
Documentsdoc, docx, txt, md
Spreadsheetsxls, xlsx, csv, ods
Presentationsppt, pptx, odp
Imagesjpg, png, gif, heic
Vectorsvg, eps, dwg
Videomp4, mov, avi, webm
Audiomp3, wav, flac, m4a
Archiveszip, gz, rar, 7z
Codejs, ts, tsx, json
Fontsttf, otf, woff
3D modelsobj, 3ds, skp

"use client";

import { FileTypeIcon } from "@/siteplane/components/file-type-icon";

const types = [
  { label: "PDF", sample: "Report.pdf", extensions: "pdf" },
  {
    label: "Documents",
    sample: "Notes.docx",
    extensions: "doc, docx, txt, md",
  },
  {
    label: "Spreadsheets",
    sample: "Budget.xlsx",
    extensions: "xls, xlsx, csv, ods",
  },
  {
    label: "Presentations",
    sample: "Pitch.pptx",
    extensions: "ppt, pptx, odp",
  },
  { label: "Images", sample: "Photo.jpg", extensions: "jpg, png, gif, heic" },
  { label: "Vector", sample: "Logo.svg", extensions: "svg, eps, dwg" },
  { label: "Video", sample: "Demo.mp4", extensions: "mp4, mov, avi, webm" },
  { label: "Audio", sample: "Podcast.mp3", extensions: "mp3, wav, flac, m4a" },
  { label: "Archives", sample: "Backup.zip", extensions: "zip, gz, rar, 7z" },
  { label: "Code", sample: "App.tsx", extensions: "js, ts, tsx, json" },
  { label: "Fonts", sample: "Inter.ttf", extensions: "ttf, otf, woff" },
  { label: "3D models", sample: "Chair.obj", extensions: "obj, 3ds, skp" },
];

export default function Example() {
  return (
    <ul className="grid w-full grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-x-6 gap-y-5">
      {types.map((type) => (
        <li className="flex items-center gap-3" key={type.label}>
          <FileTypeIcon name={type.sample} />
          <div className="grid gap-0.5 text-sm">
            <span className="font-medium">{type.label}</span>
            <span className="text-muted-foreground text-xs">
              {type.extensions}
            </span>
          </div>
        </li>
      ))}
    </ul>
  );
}

The glyphs come from react-file-icon, which the registry installs with the component. Fonts and 3D models show their own glyph on a gray label, and so do other types such as executables and disk images. An extension it does not know shows a plain document with a gray label.

The label shows up to five letters or digits. A name without a suffix, such as README, a dotfile such as .gitignore, and an extension that is longer or contains other characters show FILE. Only the last suffix counts, so archive.tar.gz is labeled GZ.

Sizes

There is no size prop. By default the icon fills a box 40 px high and 34 px wide, which matches the 5:6 proportion of the sheet. Resize the box with className, keeping that proportion, and the sheet, glyph and label scale with it. Below about 32 px the label becomes too small to read, so rely on the file name beside the icon.

24 px
32 px
40 px
48 px
64 px

"use client";

import { FileTypeIcon } from "@/siteplane/components/file-type-icon";

const sizes = [
  { className: "h-6 w-5", label: "24 px" },
  { className: "h-8 w-[27px]", label: "32 px" },
  // The default box: no className needed.
  { className: undefined, label: "40 px" },
  { className: "h-12 w-10", label: "48 px" },
  { className: "h-16 w-[53px]", label: "64 px" },
];

export default function Example() {
  return (
    <ul className="flex flex-wrap items-end justify-center gap-x-6 gap-y-5">
      {sizes.map((size) => (
        <li className="flex flex-col items-center gap-2" key={size.label}>
          <FileTypeIcon className={size.className} name="Report.pdf" />
          <span className="text-muted-foreground text-xs">{size.label}</span>
        </li>
      ))}
    </ul>
  );
}

In a file list

The icon is decorative and hidden from assistive technology. Always show the file name next to it.

Quarterly-report.pdf2.4 MB
Budget-2026.xlsx180 KB
Brand-assets.zip48 MB
Team-photo.jpg1.1 MB

"use client";

import { FileTypeIcon } from "@/siteplane/components/file-type-icon";

const files = [
  { name: "Quarterly-report.pdf", size: "2.4 MB" },
  { name: "Budget-2026.xlsx", size: "180 KB" },
  { name: "Brand-assets.zip", size: "48 MB" },
  { name: "Team-photo.jpg", size: "1.1 MB" },
];

export default function Example() {
  return (
    <ul className="grid w-full max-w-sm gap-4">
      {files.map((file) => (
        <li className="flex items-center gap-3" key={file.name}>
          <FileTypeIcon name={file.name} />
          <div className="grid text-sm">
            <span className="font-medium">{file.name}</span>
            <span className="text-muted-foreground">{file.size}</span>
          </div>
        </li>
      ))}
    </ul>
  );
}

Files without a suffix

Pass extension when the name does not carry the file type, such as a document title or a download name without its suffix. It replaces the extension in name; a leading dot and capital letters are ignored.

Meeting notes
Quarterly report
Makefile

"use client";

import { FileTypeIcon } from "@/siteplane/components/file-type-icon";

const files = [
  { name: "Meeting notes", extension: "docx" },
  { name: "Quarterly report", extension: "pdf" },
  { name: "Makefile", extension: undefined },
];

export default function Example() {
  return (
    <ul className="flex flex-wrap justify-center gap-x-8 gap-y-5">
      {files.map((file) => (
        <li className="flex flex-col items-center gap-2" key={file.name}>
          <FileTypeIcon extension={file.extension} name={file.name} />
          <span className="text-muted-foreground text-xs">{file.name}</span>
        </li>
      ))}
    </ul>
  );
}

API reference

Component properties
Prop	Type	Default	Description
`FileTypeIcon.name`	`string`	`required`	File name, with or without folders. The text after its last dot chooses the icon.
`FileTypeIcon.extension`	`string`	`unset`	Extension that replaces the one in name, with or without the leading dot.
`FileTypeIcon.className`	`string`	`unset`	Classes for the icon box. Set its height and width to resize the icon.

FileTypeIconProps has only these three props: the icon renders an aria-hidden span with a data-extension attribute around the SVG, and accepts no other native props or refs.

Read the installed source.

Usage notes

The icon takes its type from the name only; it does not read the file or its MIME type. For images and videos a thumbnail often identifies a file better, so keep the icon for lists and upload rows without a preview.

File Upload uses this icon for its rows, and the invoice in Inline CTA uses it as a detail icon.