# react-file-icon

> React component to render svg file icons

Latest version **1.6.0** (published 2025-02-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-file-icon
pnpm add react-file-icon
yarn add react-file-icon
bun add react-file-icon
```

## Health

**Score 38/100 (D)** — status: maintenance-mode.

Positive: has types package; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.0 |
| Published | 2025-02-14 |
| First published | 2018-02-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-file-icon) |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 93.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | corygibbons |
| Keywords | react, component, svg, icons, file types |

## Links

- npm: https://www.npmjs.com/package/react-file-icon
- Repository: https://github.com/corygibbons/react-file-icon
- Homepage: https://github.com/corygibbons/react-file-icon#readme
- Issues: https://github.com/corygibbons/react-file-icon/issues
- npm.io page: https://npm.io/package/react-file-icon

## Dependencies (2)

- [colord](https://npm.io/package/colord.md) ^2.9.3
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads

## Recent versions

- 1.6.0 (latest) — 2025-02-14
- 1.5.0 — 2024-06-08
- 1.4.0 — 2023-12-28
- 1.3.0 — 2022-12-16
- 1.2.0 — 2022-07-15
- 1.1.0 — 2021-07-29
- 1.0.0 — 2020-07-05
- 0.2.0 — 2018-05-19
- 0.1.1 — 2018-04-26
- 0.1.0 — 2018-02-20
- 0.0.2 — 2018-02-07
- 0.0.1 — 2018-02-06

## README

# React File Icon

[![npm version](https://img.shields.io/npm/v/react-file-icon.svg?style=flat-square)](https://www.npmjs.com/package/react-file-icon)
[![gh workflow](https://img.shields.io/github/workflow/status/corygibbons/react-file-icon/Test/master.svg?style=flat-square)](https://github.com/corygibbons/react-file-icon/actions?query=workflow%3ATest+branch%3Amaster)

[CodeSandbox demo](https://codesandbox.io/s/react-file-icon-hv4kh) with default icon styles.

```js
import { FileIcon } from 'react-file-icon';
```

## Props

<!-- prettier-ignore-start -->
| Property          | Type   | Default    | Description                       |
|:---               |:---    |:---        |:---                               |
| `color`           | string | `whitesmoke` | Color of icon background          |
| `extension`       | string | `undefined`  | Text to display in label          |
| `fold`            | bool   | `true`       | Displays the corner fold          |
| `foldColor`       | string | `undefined`  | Color of the corner fold          |
| `glyphColor`      | string | `undefined`  | Color of file type icon           |
| `gradientColor`   | string | `white`      | Color of page gradient            |
| `gradientOpacity` | number | `0.25`       | Opacity of page gradient          |
| `labelColor`      | string | `undefined`  | Color of label                    |
| `labelTextColor`  | string | `white`      | Color of label text               |
| `labelUppercase`  | bool   | `false`      | Displays the label in all caps    |
| `radius`          | number | `4`          | Corner radius of the file icon    |
| `type`            | enum   | `undefined`  | Type of glyph icon to display (One of: `3d`, `acrobat`, `android`, `audio`, `binary`, `code`, `compressed`, `document`, `drive`, `font`, `image`, `presentation`, `settings`, `spreadsheet`, `vector`, `video`) |
<!-- prettier-ignore-end -->

## Default Styles

We also export an object of [default styles](https://github.com/corygibbons/react-file-icon/blob/master/src/defaultStyles.js) that can be used as a starting point when rendering icons. Object keys map to file extensions.

```js
import { FileIcon, defaultStyles } from 'react-file-icon';

// Render a .docx icon with default styles
<FileIcon extension="docx" {...defaultStyles.docx} />;
```

---
_Source: https://npm.io/package/react-file-icon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._