@fluentui/react-icons-file-type

File type icon components for React, rendered from Microsoft Fluent CDN-hosted assets. A v9-compatible, dependency-light successor to the v8 @fluentui/react-file-type-icons package — no global icon registry and no CDN hardcoded inside the component.

Installation

npm install @fluentui/react-icons-file-type

Usage

Zero configuration

The icon resolves its assets from the Fluent CDN by default, so it works out of the box — no provider or setup required.

import { FileTypeIcon } from '@fluentui/react-icons-file-type';

function Example() {
  return <FileTypeIcon extension="docx" size={24} />;
}

Configure the asset host once

Wrap your app (or a subtree) with FileTypeIconsProvider to serve the icons from your own host — for example a same-origin CDN proxy.

import { FileTypeIconsProvider, FileTypeIcon } from '@fluentui/react-icons-file-type';

function App() {
  return (
    <FileTypeIconsProvider baseUrl="https://my-cdn.example.com/item-types/">
      <FileTypeIcon extension="pptx" size={24} />
    </FileTypeIconsProvider>
  );
}

baseUrl resolution precedence:

1. the baseUrl from the nearest <FileTypeIconsProvider>
2. the Fluent CDN default

Icons without a file extension

Use the type prop with FileIconType for icons that aren't tied to an extension (folders, lists, etc.).

import { FileTypeIcon, FileIconType } from '@fluentui/react-icons-file-type';

<FileTypeIcon type={FileIconType.folder} size={24} />;

Headless (style-free) API

The default FileTypeIcon is styled with Griffel (zero setup). To avoid bundling the Griffel runtime and own all styling yourself, import from the /headless subpath. The component is behavior-identical but ships no styling runtime; it tags the <img> with a data-fui-filetype-icon attribute you can style.

// import the opt-in stylesheet once (reproduces the default box behavior)...
import '@fluentui/react-icons-file-type/headless/styles.css';
import { FileTypeIcon } from '@fluentui/react-icons-file-type/headless';

<FileTypeIcon extension="docx" size={24} />;

/* ...or target the data attribute (or a className) with your own CSS */
[data-fui-filetype-icon] {
  display: inline-block;
  overflow: hidden;
  object-fit: contain;
}

The /headless entry point re-exports FileTypeIconsProvider, useFileTypeIconsContext, FileIconType, and the constants, so it is usable on its own. Prefer the default entry point unless you specifically need to drop the Griffel runtime.

Migrating from @fluentui/react-file-type-icons (v8)

This section is written to be self-contained for both humans and automated agents. It lists the exact package/API differences and the rewrite for each v8 usage pattern.

1. Package name changed

The package name is different (the words are reordered). Update package.json and every import.

| | Package | | -------- | --------------------------------- | | v8 (old) | @fluentui/react-file-type-icons | | v9 (new) | @fluentui/react-icons-file-type |

npm uninstall @fluentui/react-file-type-icons
npm install @fluentui/react-icons-file-type

- import { ... } from '@fluentui/react-file-type-icons';
+ import { ... } from '@fluentui/react-icons-file-type';

2. There is no global registry / initialization

v8 required initializeFileTypeIcons() at app startup to register icons into the global @fluentui/react (v8) icon registry. v9 has no global state — remove the call entirely. Assets are resolved per render from the CDN.

- import { initializeFileTypeIcons } from '@fluentui/react-file-type-icons';
- initializeFileTypeIcons();            // at app startup

3. Render with the FileTypeIcon component instead of Icon + props

v8 produced props for the v8 <Icon> component via getFileTypeIconProps. v9 ships a dedicated component; pass the same options as props.

- import { Icon } from '@fluentui/react';
- import { getFileTypeIconProps } from '@fluentui/react-file-type-icons';
- <Icon {...getFileTypeIconProps({ extension: 'docx', size: 24 })} />
+ import { FileTypeIcon } from '@fluentui/react-icons-file-type';
+ <FileTypeIcon extension="docx" size={24} />

The options are the same shape: extension, type, size, and imageFileType ('svg' | 'png'). For non-extension icons use the type prop with FileIconType (see below).

4. Configure a custom CDN via the provider (not an init argument)

- initializeFileTypeIcons('https://my-cdn.example.com/item-types/');
+ import { FileTypeIconsProvider } from '@fluentui/react-icons-file-type';
+ <FileTypeIconsProvider baseUrl="https://my-cdn.example.com/item-types/">
+   {/* ...app... */}
+ </FileTypeIconsProvider>

The Fluent CDN remains the default in both v8 and v9, so a baseUrl is only needed to override the host. There is no per-FileTypeIcon baseUrl prop — configure it on the provider.

5. FileIconType is now a const object, not a TypeScript enum

Value usage is unchanged — FileIconType.folder still works. The difference is type-level: it is a const object plus a derived union type rather than a TS enum. This avoids a runtime reverse-mapping and is generally a drop-in replacement.

import { FileTypeIcon, FileIconType } from '@fluentui/react-icons-file-type';
<FileTypeIcon type={FileIconType.folder} size={24} />;

Notes for code that did unusual things with the v8 enum:

• ✅ FileIconType.folder (value access) — unchanged.
• ✅ type: FileIconType (type annotation) — unchanged; FileIconTypeInput is also exported and is structurally the numeric union accepted by the type prop.
• ⚠️ Reverse lookup FileIconType[7] (number → name) — not available. A const object has no reverse map. If you relied on this, keep your own name table.

6. APIs that were NOT ported

The following v8 exports are intentionally not part of the v9 public API. Use the FileTypeIcon component instead.

| v8 export | v9 replacement | | --------------------------------------- | ----------------------------------------------- | | initializeFileTypeIcons() | removed — no global registry | | getFileTypeIconProps() | <FileTypeIcon {...options} /> | | getFileTypeIconAsUrl() | not exported — use <FileTypeIcon> | | getFileTypeIconAsHTMLString() | not exported — use <FileTypeIcon> | | FileTypeIconMap (raw extension table) | not exported — internal implementation detail |

v9 public API surface (for reference)

• Components: FileTypeIcon, FileTypeIconsProvider
• Hook: useFileTypeIconsContext
• Values: FileIconType, DEFAULT_BASE_URL, FLUENT_CDN_BASE_URL, DEFAULT_ICON_SIZE, ICON_SIZES
• Types: FileTypeIconProps, FileTypeIconsContextValue, FileTypeIconsProviderProps, FileIconTypeInput, FileTypeIconSize, ImageFileType