Dynamic File Type Icons in Power Apps Galleries from SharePoint Libraries

When you connect a Power Apps gallery to a SharePoint document library, you get the document name and maybe a few metadata columns—but the familiar file type icon that users rely on in SharePoint is missing. Adding those icons is not automatic, but it’s surprisingly simple once you know the URL pattern SharePoint uses to host its icon set. This article walks you through a complete, production-ready example that you can adapt to any document library.

Scenario: A Document Review Gallery for a Legal Team

Imagine a legal department that stores briefs, contracts, evidence photos, and video depositions in a SharePoint library called CaseFiles. The library contains a mix of file types: PDF, DOCX, XLSX, JPG, MP4, and so on. Associates need to quickly scan available documents and recognise their type without opening each one.

We’ll build a Power Apps screen that shows each document name together with its corresponding file type icon, exactly as users see in SharePoint.

Setting Up the SharePoint Library

Create a new document library in SharePoint named CaseFiles (or use any existing library). Upload a few files of different types:

• A PDF (e.g., Contract.pdf)
• A Word document (Brief.docx)
• An Excel workbook (Budget.xlsx)
• A PowerPoint presentation (Pitch.pptx)
• A JPEG image (EvidencePhoto.jpg)
• An MP4 video (Deposition.mp4)

Creating the Gallery in Power Apps

1. Open Power Apps Studio and create a blank canvas app.
2. Add a connection to the SharePoint site that contains your CaseFiles library.
3. Insert a Vertical gallery.
4. Set its Items property to the library name:

'CaseFiles'

For the layout, choose Image and title (two lines). This gives you an Image control on the left (for the icon) and a label on the right (for the file name). If your version does not include that layout, you can manually add an Image control and a Label.

Understanding the SharePoint Icon URL

SharePoint serves its file type icons from a static URL that has this pattern:

https://static2.sharepointonline.com/files/fabric/assets/item-types/24/{icon-name}.svg

The number 24 determines the icon size in pixels. You can change it to 16, 32, 48, 64, or 96 depending on your UI needs.

The tricky part is the {icon-name} value. For some file types the icon name matches the extension (e.g., pdf, docx, xlsx, pptx). For others—like images, audio, and video—a generic category name is used (photo, audio, video). A few more examples:

Using the wrong name (e.g., jpg instead of photo) returns an empty image, which is why we need a lookup table.

Building the Icon Mapping Table

We’ll store the mapping inside Power Apps using named formulas (the Formulas property on the App object). This is efficient because the list is calculated once when the app starts and is available globally.

Open the App object, navigate to the Advanced tab, and find the Formulas property. Add a named formula like this:

fxIconMap = [
  {Ext: "pdf", Icon: "pdf"},
  {Ext: "doc", Icon: "docx"},
  {Ext: "docx", Icon: "docx"},
  {Ext: "xls", Icon: "xlsx"},
  {Ext: "xlsx", Icon: "xlsx"},
  {Ext: "ppt", Icon: "pptx"},
  {Ext: "pptx", Icon: "pptx"},
  {Ext: "jpg", Icon: "photo"},
  {Ext: "jpeg", Icon: "photo"},
  {Ext: "png", Icon: "photo"},
  {Ext: "gif", Icon: "photo"},
  {Ext: "mp4", Icon: "video"},
  {Ext: "avi", Icon: "video"},
  {Ext: "mov", Icon: "video"},
  {Ext: "mp3", Icon: "audio"},
  {Ext: "wav", Icon: "audio"},
  {Ext: "zip", Icon: "zip"},
  {Ext: "7z", Icon: "zip"},
  {Ext: "txt", Icon: "genericfile"},
  {Ext: "csv", Icon: "csv"}
  // Expand this list as needed
]

Note: The original article by Matthew Devaney includes a comprehensive mapping of over 300 file extensions. You can find the link in the References section at the end of this article.

Wiring the Image Control

With the mapping table ready, we can now write the formula that tells the Image control which icon to load.

Inside the gallery template, select the Image control (the one that came with the layout) and set its Image property to:

With(
  {
      fileExt: Lower(Last(Split(ThisItem.File.Name, ".")).Result)
  },
  With(
      {
          iconName: LookUp(fxIconMap, Ext = fileExt, Icon)
      },
      $"https://static2.sharepointonline.com/files/fabric/assets/item-types/24/{Coalesce(iconName, "genericfile")}.svg"
  )
)

How it works:

1. Split(ThisItem.File.Name, ".") breaks the file name into parts at each dot; Last(...).Result grabs the text after the last dot (the extension).
2. Lower(...) converts the extension to lower case so the lookup is case‑insensitive.
3. LookUp(...) searches fxIconMap for a row where Ext matches and returns the Icon field. If no row is found, it returns blank.
4. Coalesce(iconName, "genericfile") uses the generic file icon as a fallback, preventing broken image placeholders.
5. $"https://.../{...}.svg" constructs the final URL.

For the label that shows the document name, bind it to ThisItem.File.Name or the column that holds the display name. Nothing else is needed.

Handling Delegation and Performance

• The gallery Items property (the SharePoint library) is fully delegable—queries are processed server‑side.
• The fxIconMap named formula is evaluated client‑side once; every image lookup is an in‑memory operation.
• The Image property is set individually on each control and does not trigger any additional network calls beyond the SVG URL requests.
• No delegation warnings or performance bottlenecks to worry about.

Common Pitfalls and Troubleshooting

Missing or broken icon Check if the extension is included in your mapping. Add a temporary label to display iconName and verify that it returns a value. Ensure the fallback genericfile works for unknown types.

Wrong icon for known files Double‑check the extension extraction: some files have names like Brief.2024.docx. The Last(Split(...)) method correctly returns docx. If you accidentally use First(Split(...)) or a different position, you will get the wrong part.

Case sensitivity The URL path is case‑insensitive, but the LookUp in your mapping will be case‑sensitive unless you apply Lower to both sides. Our formula uses Lower on the extension; make sure all values in fxIconMap are already lower case.

Icon not showing when app is offline The SVG icons are loaded from SharePoint’s CDN; they require internet connectivity. Consider caching them if offline scenarios are critical.

Named formula not available If your Power Apps environment does not yet support the Formulas property (it was introduced in preview), you can place the mapping in a global variable inside App.OnStart:

Set(gblIconMap, [
  {Ext: "pdf", Icon: "pdf"},
  {Ext: "jpg", Icon: "photo"}
  // ... rest of the mapping
]);

Then replace fxIconMap with gblIconMap in the LookUp formula.

Final Recommendation

The combination of named formulas and the SharePoint static icon URLs provides a clean, maintainable way to add file type icons to any document gallery. Start with a small mapping for the extensions you encounter most frequently, and expand it as your library grows. The pattern can be reused across multiple screens or apps by copying the fxIconMap formula.

For an exhaustive list of file extension mappings, see the original article referenced below—it covers more than 300 extensions and saves you hours of manual data entry.

References

• Matthew Devaney – “How To Show File Type Icons In A Power Apps Gallery” – the original article that inspired this walkthrough and contains a complete mapping table. https://www.matthewdevaney.com/how-to-show-file-type-icons-in-a-power-apps-gallery/
• Microsoft Learn – Named formulas in Power Apps (general guidance). https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/working-with-formulas#named-formulas
• SharePoint item‑type icon URL pattern (official documentation not located – the pattern used here is based on observation and community knowledge).