Skip to main content
FileIcon renders visually distinct icons for different file types including documents, spreadsheets, PDFs, presentations, audio, images, and generic files.

​
Installation

npm install @soft-ui/react

​
Usage

import { FileIcon } from "@soft-ui/react/file-icon"

<FileIcon fileType="pdf" size="m" />

​
API Reference

​
FileIcon

​
fileType
FileType
default:"'generic'"
Type of file to display:
  • doc - Word documents (blue)
  • spreadsheet - Excel/CSV (green)
  • pdf - PDF documents (red)
  • slides - PowerPoint presentations (orange)
  • audio - Audio files (pink)
  • image - Image files (lime)
  • generic - Unknown file types (gray)
  • custom - Custom color (requires color prop)
​
size
's' | 'm' | 'l'
default:"'m'"
Size of the icon:
  • s: 32px
  • m: 44px (default)
  • l: 56px
​
color
DecorativeColor
Custom color for fileType="custom". Supports all decorative colors: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose.
​
src
string
Image source for fileType="image" - displays actual image thumbnail instead of icon
​
className
string
Additional CSS classes

​
UploadIcon

Cloud upload icon for file upload dropzones.
​
size
's' | 'm' | 'l'
default:"'m'"
Size matching FileIcon sizes
​
className
string
Additional CSS classes

​
Helper: getFileTypeFromExtension

Automatically determine file type from filename. 
import { getFileTypeFromExtension } from "@soft-ui/react/file-icon"

const fileType = getFileTypeFromExtension("document.pdf") // "pdf"
const fileType2 = getFileTypeFromExtension("data.xlsx") // "spreadsheet"

​
Examples

​
Different File Types

<div className="flex gap-4">
  <FileIcon fileType="doc" />
  <FileIcon fileType="spreadsheet" />
  <FileIcon fileType="pdf" />
  <FileIcon fileType="slides" />
  <FileIcon fileType="audio" />
  <FileIcon fileType="image" />
</div>

​
Different Sizes

<div className="flex items-end gap-4">
  <FileIcon fileType="pdf" size="s" />
  <FileIcon fileType="pdf" size="m" />
  <FileIcon fileType="pdf" size="l" />
</div>

​
Custom Color

<div className="flex gap-4">
  <FileIcon fileType="custom" color="blue" />
  <FileIcon fileType="custom" color="purple" />
  <FileIcon fileType="custom" color="pink" />
</div>

​
Image Thumbnail

<FileIcon
  fileType="image"
  src="/path/to/image.jpg"
  size="l"
/>

​
Dynamic from Filename

import { getFileTypeFromExtension } from "@soft-ui/react/file-icon"

function FilePreview({ filename }: { filename: string }) {
  const fileType = getFileTypeFromExtension(filename)

  return (
    <div className="flex items-center gap-3">
      <FileIcon fileType={fileType} />
      <span>{filename}</span>
    </div>
  )
}

​
Upload Icon

import { UploadIcon } from "@soft-ui/react/file-icon"

<div className="flex flex-col items-center gap-2">
  <UploadIcon size="l" />
  <p>Drag and drop files here</p>
</div>

Build docs developers (and LLMs) love

Get started for freeTalk to us