0.2.0 • Public • Published

Icon Samples

React File Icon

npm version codeship

import FileIcon from 'react-file-icon';


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
labelTextStyle object undefined Style of label text
labelUppercase bool false Displays the label in all caps
radius number 4 Corner radius of the file icon
size number undefined Width and height of the file icon
type enum undefined Type of glyph icon to display (One of: 3d, acrobat, audio, binary, code, compressed, document, drive, font, image, presentation, settings, spreadsheet, vector, video)

Default Styles

We also export an object of default styles that can be used as a starting point when rendering icons. Object keys map to file extensions.

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

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

Package Sidebar


npm i @qwilapp/react-file-icon

Weekly Downloads






Unpacked Size

26.8 kB

Total Files


Last publish


  • shawnqwil
  • nicolasqwil