## Overview [#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 [#usage]
```tsx showLineNumbers
import { MimeTypeIcon } from "@tilt-legal/cubitt-components/primitives";
```
```tsx showLineNumbers
```
## Examples [#examples]
### Using MIME Types [#using-mime-types]
```tsx
import { MimeTypeIcon } from "@tilt-legal/cubitt-components/primitives";
;
```
### Using File Names [#using-file-names]
```tsx
import { MimeTypeIcon } from "@tilt-legal/cubitt-components/primitives";
;
```
### Different Sizes [#different-sizes]
```tsx
import { MimeTypeIcon } from "@tilt-legal/cubitt-components/primitives";
Small
Default
Large
Extra Large
;
```
### File List Example [#file-list-example]
```tsx
import { MimeTypeIcon } from "@tilt-legal/cubitt-components/primitives";
contract.pdf
2.4 MB
budget.xlsx
1.2 MB
presentation.pptx
5.8 MB
logo.png
384 KB
backup.zip
12.5 MB
;
```
## VirtualFileIcon [#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.
```tsx
import { VirtualFileIcon } from "@tilt-legal/cubitt-components/primitives";
import { Scroll, Sparkle } from "@tilt-legal/cubitt-icons/ui/outline";
```
Virtual files (`asset_type: "virtual"`) automatically wrap consumer icons in the blank-file shell — just pass a plain icon node:
```tsx
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: ,
};
```
### Props [#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 [#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 [#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 [#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 [#video]
* **MP4** - MPEG-4 video
* **AVI** - Audio Video Interleave
* **MOV** - QuickTime video
* **MPG** - MPEG video
### Audio [#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 [#email]
* **EML** - Email messages (RFC 822)
* **MSG** - Outlook email messages
### Development [#development]
* **HTML** - HyperText Markup Language
* **CSS** - Cascading Style Sheets
* **JS** - JavaScript files
* **JSON** - JavaScript Object Notation
* **JAVA** - Java source code
### Archives & Executables [#archives--executables]
* **ZIP** - ZIP archives
* **RAR** - RAR archives
* **DMG** - macOS disk images
* **EXE** - Windows executables
## Props [#props-1]
### MimeTypeIcon [#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 [#design-guidelines]
### Usage Patterns [#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 [#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 [#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