During a recent Power Apps project, I had to work with a SharePoint document library containing various document types, including PDFs, Word documents, Excel files, and images.
In the Power Apps app, these files were shown inside a gallery. By default, users could only see the file name, which was not very helpful. End users wanted to quickly understand what type of file it was without opening it.
That’s when I decided to show file-type icons instead of just text. For example, a PDF file should show a PDF icon, Word documents should show a Word icon, Excel files should show an Excel icon, and image files should display their actual preview.
In this tutorial, I’ll show you how to show file type icons in Power Apps gallery using the modern card control.
Example 1: Show PDF Icon in Power Apps Gallery
Here is a Power Apps gallery (with title and image layout). All the files are showing up from a SharePoint library called Project Documents. This contains some PDF files.
Now, I want to show a PDF icon in the Power Apps gallery. This means that for all PDF files stored in the SharePoint library, a PDF icon will be displayed, as shown below.
To achieve it, select the image inside the gallery and set its Image property to the code below:
With(
{
ext: Last(Split(Lower(ThisItem.'File name with extension'), ".")).Value
},
If(
ext = "pdf",
"data:image/svg+xml;utf8," &
EncodeUrl(
"<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>
<rect x='6' y='4' width='28' height='40' rx='4' fill='#ef4444'/>
<text x='24' y='30' text-anchor='middle' fill='white' font-size='12'>PDF</text>
</svg>"
),
""
)
)Refer to the image below:
This way, we can display the PDF icons in a Power Apps gallery.
Example 2: Show Word and Excel Icons
Next, I added separate icons for Word and Excel files so users could quickly identify the document type without opening it.
In the same way, select the image inside the gallery and set its Image property to the code below:
With(
{
ext: Last(Split(Lower(ThisItem.'File name with extension'), ".")).Value
},
"data:image/svg+xml;utf8," &
EncodeUrl(
Switch(
ext,
// 📘 Word
"doc",
"<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>
<rect x='6' y='4' width='28' height='40' rx='4' fill='#ffffff' stroke='#1e40af' stroke-width='2'/>
<rect x='6' y='30' width='36' height='14' rx='4' fill='#2563eb'/>
<text x='24' y='41' text-anchor='middle'
font-family='Segoe UI, Arial'
font-size='10'
font-weight='700'
fill='white'>DOC</text>
</svg>",
"docx",
"<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>
<rect x='6' y='4' width='28' height='40' rx='4' fill='#ffffff' stroke='#1e40af' stroke-width='2'/>
<rect x='6' y='30' width='36' height='14' rx='4' fill='#2563eb'/>
<text x='24' y='41' text-anchor='middle'
font-family='Segoe UI, Arial'
font-size='9'
font-weight='700'
fill='white'>DOCX</text>
</svg>",
// 📗 Excel
"xls",
"<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>
<rect x='6' y='4' width='28' height='40' rx='4' fill='#ffffff' stroke='#166534' stroke-width='2'/>
<rect x='6' y='30' width='36' height='14' rx='4' fill='#16a34a'/>
<text x='24' y='41' text-anchor='middle'
font-family='Segoe UI, Arial'
font-size='10'
font-weight='700'
fill='white'>XLS</text>
</svg>",
"xlsx",
"<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>
<rect x='6' y='4' width='28' height='40' rx='4' fill='#ffffff' stroke='#166534' stroke-width='2'/>
<rect x='6' y='30' width='36' height='14' rx='4' fill='#16a34a'/>
<text x='24' y='41' text-anchor='middle'
font-family='Segoe UI, Arial'
font-size='9'
font-weight='700'
fill='white'>XLSX</text>
</svg>"
)
)
)Refer to the screenshot below:
This way, we can show Word (doc, docx) and Excel (xls, xlsx) icons inside the Power Apps gallery.
Example 3: Show Actual Image Preview for Image Files
For image files, users preferred to see the actual image instead of an icon. So, I directly displayed the image using the file path when the extension matched image formats.
Select the image inside the gallery and set its Image property to the code below:
With(
{
ext: Lower(Last(Split(ThisItem.'File name with extension', ".")).Value)
},
If(
ext in ["jpg","jpeg","png"],
ThisItem.Thumbnail.Large,
Blank()
)
)Refer to the screenshot below:
This way, we can display thumbnail previews for image files in Power Apps.
Show File Type Icons in Power Apps Gallery [Final Combined Scenario]
Now, we will combine all the above scenarios into one place using a single formula. Based on the file type stored in SharePoint, the gallery will display the correct icon. For example, PDF files will show a PDF icon, Excel files will show an Excel icon, and so on.
To achieve this, I used a vertical gallery with the Modern Card control. Inside the card, the HeaderImage property is used to display the appropriate icon for each file type. You can refer to the image below to see how it looks.
Select the Modern Card’s (inside the gallery) HeaderImage property and apply the code below:
With(
{
fn: Lower(ThisItem.'File name with extension'),
ext: If(
"." in Lower(ThisItem.'File name with extension'),
Last(
Split(
Lower(ThisItem.'File name with extension'),
"."
)
).Value,
""
)
},
If(
// 🖼️ Show actual image preview
ext in [
"jpg",
"jpeg",
"png",
"gif",
"bmp"
],
ThisItem.Thumbnail.Large,
// 📄 Otherwise show SVG icon
"data:image/svg+xml;utf8," & EncodeUrl(
Switch(
ext,
// 📕 PDF
"pdf",
"<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>
<rect x='6' y='4' width='28' height='40' rx='4' fill='#ffffff' stroke='#111827' stroke-width='2'/>
<path d='M34 4v10h10' fill='none' stroke='#111827' stroke-width='2'/>
<path d='M34 4l10 10' fill='none' stroke='#111827' stroke-width='2'/>
<rect x='6' y='30' width='36' height='14' rx='4' fill='#ef4444'/>
<text x='24' y='41' text-anchor='middle'
font-family='Segoe UI, Arial'
font-size='10'
font-weight='700'
fill='white'>PDF</text>
</svg>",
// 📘 Word
"doc",
"<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>
<rect x='6' y='4' width='28' height='40' rx='4' fill='#ffffff' stroke='#1e40af' stroke-width='2'/>
<rect x='6' y='30' width='36' height='14' rx='4' fill='#2563eb'/>
<text x='24' y='41' text-anchor='middle'
font-family='Segoe UI, Arial'
font-size='10'
font-weight='700'
fill='white'>DOC</text>
</svg>",
"docx",
"<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>
<rect x='6' y='4' width='28' height='40' rx='4' fill='#ffffff' stroke='#1e40af' stroke-width='2'/>
<rect x='6' y='30' width='36' height='14' rx='4' fill='#2563eb'/>
<text x='24' y='41' text-anchor='middle'
font-family='Segoe UI, Arial'
font-size='9'
font-weight='700'
fill='white'>DOCX</text>
</svg>",
// 📗 Excel
"xls",
"<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>
<rect x='6' y='4' width='28' height='40' rx='4' fill='#ffffff' stroke='#166534' stroke-width='2'/>
<rect x='6' y='30' width='36' height='14' rx='4' fill='#16a34a'/>
<text x='24' y='41' text-anchor='middle'
font-family='Segoe UI, Arial'
font-size='10'
font-weight='700'
fill='white'>XLS</text>
</svg>",
"xlsx",
"<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>
<rect x='6' y='4' width='28' height='40' rx='4' fill='#ffffff' stroke='#166534' stroke-width='2'/>
<rect x='6' y='30' width='36' height='14' rx='4' fill='#16a34a'/>
<text x='24' y='41' text-anchor='middle'
font-family='Segoe UI, Arial'
font-size='9'
font-weight='700'
fill='white'>XLSX</text>
</svg>",
// 📄 Default
"<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>
<rect x='6' y='4' width='28' height='40' rx='4' fill='#e5e7eb' stroke='#6b7280' stroke-width='2'/>
<rect x='6' y='30' width='36' height='14' rx='4' fill='#6b7280'/>
<text x='24' y='41' text-anchor='middle'
font-family='Segoe UI, Arial'
font-size='9'
font-weight='700'
fill='white'>FILE</text>
</svg>"
)
)
)
)This code checks the file type of each item in the gallery and decides what image to show. First, it gets the file extension (like PDF, DOCX, JPG) from the file name and converts it to lowercase.
- If the file is an image (JPG, PNG, GIF, etc.), it shows the actual image preview using the file thumbnail.
- If the file is not an image, it shows a matching file icon (PDF, Word, Excel).
- If the file type doesn’t match anything specific, it shows a default file icon.
That’s it. Now, save, publish, and preview the app. You will see all the file icon’s based on the SharePoint files.
I hope this article helped you learn how to display file type icons in the Power Apps gallery, such as PDF, Excel, Word, etc. Also, we discussed how to display file icons in the Power Apps gallery using a Power Apps modern header control, with various examples.
Additionally, you may like some more Power Apps tutorials:
- Get Tenant Name in Power Apps
- Restore Deleted Apps in Power Apps
- Power Apps Vibe
- Create a SharePoint Site Using Power Apps
- Retrieve SharePoint List Data into Power Apps
Hey! I’m Bijay Kumar, founder of SPGuides.com and a Microsoft Business Applications MVP (Power Automate, Power Apps). I launched this site in 2020 because I truly enjoy working with SharePoint, Power Platform, and SharePoint Framework (SPFx), and wanted to share that passion through step-by-step tutorials, guides, and training videos. My mission is to help you learn these technologies so you can utilize SharePoint, enhance productivity, and potentially build business solutions along the way.
