Is there any way to dynamically get the icon of the files using its extensions in Sharepoint SPFX?

Thanks in Advance!

2 Answers 2


You can use the SP.Web.mapToIcon method to map a file name to an icon. To use it from SPFx, you would make a REST API call to /_api/web/maptoicon(filename, progid, size).

An example call would be /_api/web/maptoicon(filename='filename.pdf', progid='', size='0').

Here are some additional resources that may help you.

SP.Web.mapToIcon Method

Getting the default document icon using Office 365 SharePoint REST API


You can use approaches like SP.Web.mapToIcon as Rob says (as a general rule, you should always listen to what Rob says!), but if you simply want to render a file icon, you can use the PnP React Reusable Controls; There is a FileTypeIcon control which does all the hard work for you.

After you install the control in your SPFx project (using npm install @pnp/spfx-controls-react --save --save-exact)

In your code, you need to import the control:

import { FileTypeIcon, ApplicationType, IconType, ImageSize } from "@pnp/spfx-controls-react/lib/FileTypeIcon";

And then place the controls where you'd like to display them, passing the filename as a parameter:

/* Showing the icons font */
<FileTypeIcon type={IconType.font} path="https://contoso.sharepoint.com/documents/filename.docx" />
<FileTypeIcon type={IconType.font} path="https://contoso.sharepoint.com/documents/filename.xslx" />

/* Showing the icon image */
<FileTypeIcon type={IconType.image} path="https://contoso.sharepoint.com/documents/filename.docx" />

/* Icon image allows three different sizes */
<FileTypeIcon type={IconType.image} size={ImageSize.small} application={ApplicationType.Excel} />
<FileTypeIcon type={IconType.image} size={ImageSize.medium} application={ApplicationType.Excel} />
<FileTypeIcon type={IconType.image} size={ImageSize.large} application={ApplicationType.Excel} />

For more information, take a look at https://pnp.github.io/sp-dev-fx-controls-react/controls/FileTypeIcon/

I hope this helps?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.