FileIcon

free

FileIcon renders a colored SVG badge for common file types, with a folder variant and automatic fallback for unknown extensions.

Preview

Dark

import FileIcon from '@/components/composites/FileIcon';

export default function UsageDemo() {
  return (
    <div className="flex items-center gap-4">
      <FileIcon type="pdf" />
      <FileIcon type="xlsx" />
      <FileIcon type="docx" />
      <FileIcon type="png" />
      <FileIcon type="mp4" />
      <FileIcon type="mp3" />
    </div>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add FileIcon

Examples

Sizes

Preview

Dark

import FileIcon from '@/components/composites/FileIcon';

export default function SizesDemo() {
  return (
    <div className="flex items-end gap-4">
      <FileIcon type="pdf" size={20} />
      <FileIcon type="pdf" size={30} />
      <FileIcon type="pdf" size={48} />
      <FileIcon type="pdf" size={64} />
    </div>
  );
}

All Supported Types

Preview

Dark

pdf

xlsx

csv

doc

ppt

jpg

png

gif

svg

mp4

mp3

txt

directory

xyz

import FileIcon from '@/components/composites/FileIcon';

const TYPES = [
  'pdf', 'xlsx', 'csv', 'doc', 'ppt',
  'jpg', 'png', 'gif', 'svg', 'mp4', 'mp3',
  'txt', 'directory', 'xyz',
];

export default function AllTypesDemo() {
  return (
    <div className="grid grid-cols-5 gap-4">
      {TYPES.map((t) => (
        <div key={t} className="flex flex-col items-center gap-1">
          <FileIcon type={t} size={36} />
          <span className="text-xs text-muted-foreground">{t}</span>
        </div>
      ))}
    </div>
  );
}

API

Prop	Description	Type	Default
`type`	File extension or `'directory'`. Determines the rendered media glyph, label badge, or folder icon.	`string`	—
`size`	Width and height of the SVG in pixels.	`number`	`30`