@nice2dev/icons-filetypes

Comprehensive file type icons for React applications. Features over 150 icons covering documents, code, media, images, archives, fonts, databases, 3D models, CAD files, and Adobe applications.

Installation

pnpm add @nice2dev/icons-filetypes
# or
npm install @nice2dev/icons-filetypes

Features

• 150+ file type icons covering all common formats
• 3 variants: filled, outlined, colored
• Consistent sizing with customizable dimensions
• Brand-accurate colors for colored variants
• TypeScript support with full type definitions
• Tree-shakeable - import only what you need

Usage

Basic Usage

import { PdfIcon, JsIcon, DocxIcon } from '@nice2dev/icons-filetypes';

function FileList() {
  return (
    <div>
      <PdfIcon />
      <JsIcon variant="colored" />
      <DocxIcon size={32} color="#333" />
    </div>
  );
}

Icon Variants

import { PdfIcon } from '@nice2dev/icons-filetypes';

// Filled (default)
<PdfIcon variant="filled" />

// Outlined
<PdfIcon variant="outlined" />

// Colored (with extension badge)
<PdfIcon variant="colored" />

Customization

import { ZipIcon } from '@nice2dev/icons-filetypes';

<ZipIcon
  size={48} // Icon size in pixels (default: 24)
  color="#1a1a1a" // Base color for filled/outlined
  extensionColor="#ff00ff" // Override extension badge color
  className="my-icon" // Custom CSS class
/>;

Available Icons

Documents (16 icons)

DocIcon, DocxIcon, XlsIcon, XlsxIcon, PptIcon, PptxIcon, PdfIcon, TxtIcon, RtfIcon, CsvIcon, OdtIcon, OdsIcon, OdpIcon, PagesIcon, NumbersIcon, KeynoteIcon

Media - Video (13 icons)

Mp4Icon, AviIcon, MkvIcon, MovIcon, WebmIcon, WmvIcon, FlvIcon, M4vIcon, MpgIcon, MpegIcon, ThreeGpIcon, TsIcon, VobIcon

Media - Audio (10 icons)

Mp3Icon, WavIcon, FlacIcon, OggIcon, AacIcon, M4aIcon, WmaIcon, AiffIcon, MidIcon, MidiIcon

Images (16 icons)

JpgIcon, JpegIcon, PngIcon, GifIcon, SvgIcon, WebpIcon, BmpIcon, TiffIcon, IcoIcon, RawIcon, Cr2Icon, NefIcon, HeicIcon, HeifIcon, AvifIcon, EpsIcon

Code (37 icons)

JsIcon, TsIcon, JsxIcon, TsxIcon, PyIcon, JavaIcon, CsIcon, CppIcon, CIcon, HIcon, GoIcon, RsIcon, RbIcon, PhpIcon, SwiftIcon, KtIcon, ScalaIcon, RLangIcon, HtmlIcon, CssIcon, ScssIcon, LessIcon, JsonIcon, XmlIcon, YamlIcon, YmlIcon, TomlIcon, MdIcon, VueIcon, SvelteIcon, DartIcon, LuaIcon, ShIcon, BashIcon, Ps1Icon, BatIcon, SqlIcon

Archives (10 icons)

ZipIcon, RarIcon, SevenZIcon, TarIcon, GzIcon, Bz2Icon, XzIcon, IsoIcon, DmgIcon, PkgIcon

Fonts (5 icons)

TtfIcon, OtfIcon, WoffIcon, Woff2Icon, EotIcon

Databases (4 icons)

DbIcon, SqliteIcon, MdbIcon, AccdbIcon

3D Models (9 icons)

ObjIcon, FbxIcon, GltfIcon, GlbIcon, StlIcon, BlendIcon, MaxIcon, MayaIcon, C4dIcon

CAD (6 icons)

DwgIcon, DxfIcon, StepIcon, IgesIcon, SldprtIcon, CatpartIcon

Adobe (12 icons)

PsdIcon, AiIcon, InddIcon, XdIcon, AeIcon, PrIcon, LrIcon, BrIcon, DwIcon, AnIcon, AuIcon, FlIcon

Extension Lookup

Use the FILE_TYPE_ICONS map to get icon names by file extension:

import { FILE_TYPE_ICONS } from '@nice2dev/icons-filetypes';

const extension = 'pdf';
const iconName = FILE_TYPE_ICONS[extension]; // 'PdfIcon'

Custom Icons

Create custom file type icons using the factory function:

import { createFiletypeIcon, renderFileBase, renderExtensionBadge } from '@nice2dev/icons-filetypes';

export const CustomIcon = createFiletypeIcon(
  ({ color, extensionColor, variant }) => (
    <>
      {renderFileBase(color, variant, variant === 'colored' ? '#E3F2FD' : undefined)}
      {/* Add custom inner content */}
      {variant === 'colored' && renderExtensionBadge('CUSTOM', extensionColor!)}
    </>
  ),
  { displayName: 'CustomIcon', extension: 'custom', defaultExtensionColor: '#FF5722' },
);

TypeScript

Full type definitions included:

import type { FiletypeIconProps, FiletypeVariant, FiletypeCategory } from '@nice2dev/icons-filetypes';

interface MyComponentProps {
  variant: FiletypeVariant; // 'filled' | 'outlined' | 'colored'
}

License

MIT © Nice2Dev