Mime Type Icon

Overview

The MimeTypeIcon component automatically displays appropriate icons for different file types and MIME types. It uses the comprehensive Cubitt icon system to provide consistent, recognisable visual representations for over 40 different file formats, including full coverage of browser MIME type aliases. Perfect for file managers, document lists, and attachment displays.

Usage

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

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

Examples

Using MIME Types

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

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

Using File Names

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

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

Different Sizes

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

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

File List Example

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

<div className="w-full max-w-md">
  <div className="space-y-2">
    <div className="flex items-center gap-3 p-2 rounded-md hover:bg-muted/50">
      <MimeTypeIcon fileName="contract.pdf" className="size-5" />
      <span className="text-sm">contract.pdf</span>
      <span className="text-xs text-muted-foreground ml-auto">2.4 MB</span>
    </div>
    <div className="flex items-center gap-3 p-2 rounded-md hover:bg-muted/50">
      <MimeTypeIcon fileName="budget.xlsx" className="size-5" />
      <span className="text-sm">budget.xlsx</span>
      <span className="text-xs text-muted-foreground ml-auto">1.2 MB</span>
    </div>
    <div className="flex items-center gap-3 p-2 rounded-md hover:bg-muted/50">
      <MimeTypeIcon fileName="presentation.pptx" className="size-5" />
      <span className="text-sm">presentation.pptx</span>
      <span className="text-xs text-muted-foreground ml-auto">5.8 MB</span>
    </div>
    <div className="flex items-center gap-3 p-2 rounded-md hover:bg-muted/50">
      <MimeTypeIcon fileName="logo.png" className="size-5" />
      <span className="text-sm">logo.png</span>
      <span className="text-xs text-muted-foreground ml-auto">384 KB</span>
    </div>
    <div className="flex items-center gap-3 p-2 rounded-md hover:bg-muted/50">
      <MimeTypeIcon fileName="backup.zip" className="size-5" />
      <span className="text-sm">backup.zip</span>
      <span className="text-xs text-muted-foreground ml-auto">12.5 MB</span>
    </div>
  </div>
</div>;

VirtualFileIcon

The VirtualFileIcon renders a blank document outline with a consumer-provided icon centered on top. Use it for virtual/derived files (transcripts, AI summaries, etc.) that don't map to a real MIME type.

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

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

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

Virtual files (asset_type: "virtual") automatically wrap consumer icons in the blank-file shell — just pass a plain icon node:

const file: FileAsset = {
  id: "t-1",
  name: "Deposition Transcript",
  asset_type: "virtual",
  virtual_type: "transcript",
  status: "active",
  created_at: "2025-01-10T09:00:00.000Z",
  updated_at: "2025-01-10T09:00:00.000Z",
  created_by: "System",
  icon: <Scroll />,
};

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Icon to render centered on the blank document outline
`className`	`string`	—	Size and style via Tailwind (e.g. `size-[62px]`)

Supported File Types

The MimeTypeIcon component supports over 40 different file types across all major categories. It also handles MIME type aliases (e.g., audio/x-m4a, audio/mp4) automatically.

Documents

PDF - Portable Document Format
DOC/DOCX - Microsoft Word documents
XLS/XLSX - Microsoft Excel spreadsheets
PPT/PPTX - Microsoft PowerPoint presentations
TXT - Plain text files
CSV - Comma-separated values

Images

JPEG/JPG - JPEG images
PNG - Portable Network Graphics
GIF - Graphics Interchange Format
SVG - Scalable Vector Graphics
WEBP - WebP images
TIFF - Tagged Image File Format
ICO - Icon files

Video

MP4 - MPEG-4 video
AVI - Audio Video Interleave
MOV - QuickTime video
MPG - MPEG video

Audio

MP3 - MPEG audio
WAV - Wave audio
AAC - Advanced Audio Coding
FLAC - Free Lossless Audio Codec
M4A - MPEG-4 audio
WMA - Windows Media Audio

Email

EML - Email messages (RFC 822)
MSG - Outlook email messages

Development

HTML - HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript files
JSON - JavaScript Object Notation
JAVA - Java source code

Archives & Executables

ZIP - ZIP archives
RAR - RAR archives
DMG - macOS disk images
EXE - Windows executables

Props

MimeTypeIcon

Prop	Type	Default	Description
`mimeType`	`string`	-	MIME type of the file (e.g., "application/pdf")
`fileName`	`string`	-	File name with extension (e.g., "document.pdf")
`className`	`string`	-	Additional CSS classes to apply to the icon
`size`	`number \| string`	-	Size of the icon (passed to the underlying icon component)

Note: You must provide either mimeType or fileName. If both are provided, the component tries mimeType first, then falls back to the fileName extension. This means a file with an unrecognised MIME type (e.g., application/octet-stream) but a known extension (e.g., report.pdf) will still display the correct icon. If neither matches a supported type, the component renders a generic blank file icon.

Design Guidelines

Usage Patterns

File Lists: Use consistent sizing (typically size-5 or size-6) for file listings
Attachments: Display alongside file names and sizes for clear identification
Upload Areas: Show appropriate icons during file selection or drag-and-drop
Document Cards: Use larger sizes (size-8 to size-12) for prominent file representations

Accessibility

Context: Always provide file names or descriptions alongside icons for screen readers
Fallback: The component includes appropriate fallback behavior for unknown file types
Semantic HTML: Icons are decorative and don't require alt text when used with descriptive text

Visual Consistency

Sizing: Use consistent icon sizes within the same interface section
Spacing: Maintain consistent spacing between icons and accompanying text
Color: Icons inherit text color by default and work well with muted foreground colors

Mime Type Icon

On this page