Mime Type Icon

Overview

MimeTypeIcon resolves an icon from either a MIME type or a file extension. Use it anywhere a file needs a compact visual identifier, such as attachment lists, upload flows, file cards, and document pickers.

Usage

import { MimeTypeIcon } from "@tilt-legal/cubitt-components/mime-type";

<MimeTypeIcon mimeType="application/pdf" />
<MimeTypeIcon fileName="document.docx" />
<MimeTypeIcon className="size-6" mimeType="image/png" />

Examples

MIME Types

import { MimeTypeIcon } from "@tilt-legal/cubitt-components/mime-type";

<div className="flex items-center gap-4">
  <div className="flex flex-col items-center gap-2">
    <MimeTypeIcon className="size-8" mimeType="application/pdf" />
    <span className="text-fg-2 text-xs">PDF</span>
  </div>
  <div className="flex flex-col items-center gap-2">
    <MimeTypeIcon className="size-8" mimeType="application/msword" />
    <span className="text-fg-2 text-xs">DOC</span>
  </div>
  <div className="flex flex-col items-center gap-2">
    <MimeTypeIcon className="size-8" mimeType="image/jpeg" />
    <span className="text-fg-2 text-xs">JPEG</span>
  </div>
  <div className="flex flex-col items-center gap-2">
    <MimeTypeIcon className="size-8" mimeType="application/zip" />
    <span className="text-fg-2 text-xs">ZIP</span>
  </div>
</div>;

File Names

import { MimeTypeIcon } from "@tilt-legal/cubitt-components/mime-type";

<div className="flex items-center gap-4">
  <div className="flex flex-col items-center gap-2">
    <MimeTypeIcon className="size-8" fileName="report.xlsx" />
    <span className="text-fg-2 text-xs">XLSX</span>
  </div>
  <div className="flex flex-col items-center gap-2">
    <MimeTypeIcon className="size-8" fileName="presentation.pptx" />
    <span className="text-fg-2 text-xs">PPTX</span>
  </div>
  <div className="flex flex-col items-center gap-2">
    <MimeTypeIcon className="size-8" fileName="video.mp4" />
    <span className="text-fg-2 text-xs">MP4</span>
  </div>
  <div className="flex flex-col items-center gap-2">
    <MimeTypeIcon className="size-8" fileName="archive.rar" />
    <span className="text-fg-2 text-xs">RAR</span>
  </div>
</div>;

Sizes

import { MimeTypeIcon } from "@tilt-legal/cubitt-components/mime-type";

<div className="flex items-center gap-6">
  <div className="flex flex-col items-center gap-2">
    <MimeTypeIcon className="size-4" mimeType="application/pdf" />
    <span className="text-fg-2 text-xs">Small</span>
  </div>
  <div className="flex flex-col items-center gap-2">
    <MimeTypeIcon className="size-6" mimeType="application/pdf" />
    <span className="text-fg-2 text-xs">Default</span>
  </div>
  <div className="flex flex-col items-center gap-2">
    <MimeTypeIcon className="size-8" mimeType="application/pdf" />
    <span className="text-fg-2 text-xs">Large</span>
  </div>
  <div className="flex flex-col items-center gap-2">
    <MimeTypeIcon className="size-12" mimeType="application/pdf" />
    <span className="text-fg-2 text-xs">Extra Large</span>
  </div>
</div>;

File List

import { MimeTypeIcon } from "@tilt-legal/cubitt-components/mime-type";

const files = [
  { name: "contract.pdf", size: "2.4 MB" },
  { name: "budget.xlsx", size: "1.2 MB" },
  { name: "presentation.pptx", size: "5.8 MB" },
  { name: "logo.png", size: "384 KB" },
  { name: "backup.zip", size: "12.5 MB" },
];

<div className="w-full max-w-md">
  <div className="space-y-2">
    {files.map((file) => (
      <div className="flex items-center gap-3 rounded-md p-2" key={file.name}>
        <MimeTypeIcon className="size-5" fileName={file.name} />
        <span className="text-sm">{file.name}</span>
        <span className="ml-auto text-fg-2 text-xs">{file.size}</span>
      </div>
    ))}
  </div>
</div>;

Virtual File Icon

VirtualFileIcon renders the blank document shape with a consumer-provided icon centered on top. Use it for derived files, transcripts, summaries, or other virtual file types that do not map to a real MIME type.

import { VirtualFileIcon } from "@tilt-legal/cubitt-components/mime-type";
import { Scroll, Sparkle } from "@tilt-legal/cubitt-icons/ui/outline";

<VirtualFileIcon className="size-[62px]">
  <Scroll />
</VirtualFileIcon>

<VirtualFileIcon className="size-5">
  <Sparkle />
</VirtualFileIcon>

API Reference

MimeTypeIcon

Prop	Type	Default	Description
`mimeType`	`string`	–	MIME type to resolve, for example `application/pdf`.
`fileName`	`string`	–	File name or extension to resolve, for example `document.pdf` or `.pdf`.
`className`	`string`	–	Additional classes. Use this for sizing, such as `size-5`.
`size`	`number \| string`	–	Explicit size passed through to the underlying icon component.

Provide either mimeType or fileName. If both are provided, mimeType is tried first and fileName is used as a fallback.

VirtualFileIcon

Prop	Type	Default	Description
`children`	`ReactNode`	–	Icon to render centered on the blank document outline.
`className`	`string`	–	Additional classes. Use this for sizing, such as `size-[62px]`.
`size`	`number \| string`	–	Explicit size passed through to the blank document icon.

Supported File Types

MimeTypeIcon supports common document, image, video, audio, email, development, archive, and executable file types. Unknown MIME types or extensions render the generic blank file icon.

Documents

PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX
TXT, CSV

Media

JPEG, JPG, PNG, GIF, SVG, WEBP, TIFF, ICO
MP4, AVI, MOV, MPG
MP3, WAV, AAC, FLAC, M4A, WMA

Other

EML, MSG
HTML, CSS, JS, JSON, JAVA
ZIP, RAR, DMG, EXE

Mime Type Icon

On this page