Chapter 86: Icons File Type
1. What is the “Icons File Type” page?
This page lists only the icons that represent specific file formats and document types — things people see every day when downloading, uploading, sharing or managing files.
These icons are extremely common on:
- File upload / download interfaces
- Document management systems
- “My Files” / “Downloads” sections
- Email attachment previews
- “Open with” / “Save as” dialogs
- File explorer / cloud storage views (Google Drive, Dropbox, OneDrive style)
- Admin panels showing user-uploaded content
- “Supported File Formats” lists
- Blog / CMS media library
- E-commerce invoice / receipt downloads
In Font Awesome 5 free the File Type category is medium-sized and very practical — around 25–35 icons (mostly solid fas style). Font Awesome 6 and 7 added many more (file-pdf, file-word, file-excel, file-powerpoint, file-csv, file-code, file-image, file-video, file-audio, file-zipper, file-lines), but FA5 free already has the most essential file-type symbols that are still powering almost every file-related UI in 2026.
2. Main Free File Type Icons in Font Awesome 5
Here are the most important and frequently used ones (solid fas unless noted):
| Icon name | Class name | Looks like | Represents / Most common usage |
|---|---|---|---|
| file | fas fa-file | 📄 Blank document | Generic / unknown file type |
| file-alt | fas fa-file-alt | 📄 Text document | Text file, article, report |
| file-pdf | fas fa-file-pdf | PDF document (very popular) | |
| file-word | fas fa-file-word | 📘 Word doc | Microsoft Word (.doc / .docx) |
| file-excel | fas fa-file-excel | 📗 Excel | Microsoft Excel (.xls / .xlsx) |
| file-powerpoint | fas fa-file-powerpoint | 📙 PowerPoint | Microsoft PowerPoint (.ppt / .pptx) |
| file-image | fas fa-file-image | 🖼️ Image file | JPG, PNG, GIF, any image format |
| file-archive | fas fa-file-archive | 📦 ZIP / archive | ZIP, RAR, TAR, compressed file |
| file-code | fas fa-file-code | 💾 Code file | HTML, CSS, JS, PHP, Python, source code |
| file-csv | fas fa-file-csv | 📊 CSV file | Comma-separated values, spreadsheet data |
| file-download | fas fa-file-download | ↓ Download file | Download button / link |
| file-upload | fas fa-file-upload | ↑ Upload file | Upload / attach file button |
| file-invoice | fas fa-file-invoice | 📄 Invoice | Bill, receipt, invoice document |
| file-invoice-dollar | fas fa-file-invoice-dollar | 📄₹ Invoice with ₹ | Invoice with currency symbol |
| file-medical | fas fa-file-medical | 📄 Medical report | Medical / health record (overlap with Medical) |
| file-contract | fas fa-file-contract | 📄 Contract | Legal agreement, terms & conditions |
| file-signature | fas fa-file-signature | 📄 Signed document | Signed contract, digital signature |
These are the core free File Type icons in Font Awesome 5 — very clean and instantly recognizable for any file-related context.
Missing in FA5 free (but added in FA6/7 free):
- file-lines (text file with lines)
- file-zipper (ZIP file)
- file-video / file-audio / file-music
- file-spreadsheet / file-table
- file-chart-column / file-chart-pie
- file-circle-check / file-circle-xmark (validated / error file)
3. Real Code Examples – How Developers Actually Use Them
Example 1: File Upload / Attachment Preview (very common)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div style="border:2px dashed #bbdefb; padding:40px; max-width:500px; margin:60px auto; border-radius:12px; text-align:center; background:#e3f2fd;"> <i class="fas fa-file-upload fa-7x" style="color:#2196f3; margin-bottom:25px;"></i> <h2>Upload Your Document</h2> <p style="font-size:1.4rem; margin:20px 0;"> Supported formats: <i class="fas fa-file-pdf" style="color:#f44336;"></i> PDF • <i class="fas fa-file-word" style="color:#2b579a;"></i> Word • <i class="fas fa-file-excel" style="color:#217346;"></i> Excel </p> <button style="background:#2196f3; color:white; padding:14px 28px; border:none; border-radius:50px;"> Choose File </button> </div> |
Example 2: Download Links / File List
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<ul style="list-style:none; padding:0; font-size:1.3rem; max-width:600px; margin:50px auto;"> <li style="margin:18px 0; display:flex; align-items:center; gap:15px;"> <i class="fas fa-file-pdf fa-2x" style="color:#f44336;"></i> <a href="#" style="color:#2196f3; text-decoration:none;">Annual Report 2025.pdf</a> <small style="color:#757575; margin-left:auto;">2.4 MB</small> </li> <li style="margin:18px 0; display:flex; align-items:center; gap:15px;"> <i class="fas fa-file-word fa-2x" style="color:#2b579a;"></i> <a href="#" style="color:#2196f3; text-decoration:none;">Proposal.docx</a> <small style="color:#757575; margin-left:auto;">1.1 MB</small> </li> <li style="margin:18px 0; display:flex; align-items:center; gap:15px;"> <i class="fas fa-file-excel fa-2x" style="color:#217346;"></i> <a href="#" style="color:#2196f3; text-decoration:none;">Sales Data.xlsx</a> <small style="color:#757575; margin-left:auto;">856 KB</small> </li> </ul> |
Example 3: Invoice / Receipt Download Button
HTML
|
0 1 2 3 4 5 6 7 8 9 |
<button style="background:#4caf50; color:white; padding:16px 32px; border:none; border-radius:50px; font-size:1.3rem; cursor:pointer; box-shadow:0 4px 12px rgba(76,175,80,0.3);"> <i class="fas fa-file-invoice-dollar" style="margin-right:12px; font-size:1.6rem;"></i> Download Invoice </button> |
Example 4: “Supported Formats” List (upload page)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div style="text-align:center; margin:40px 0; font-size:1.3rem; color:#555;"> <p>Accepted file types:</p> <div style="display:flex; justify-content:center; gap:30px; font-size:3rem;"> <i class="fas fa-file-pdf" style="color:#f44336;" title="PDF"></i> <i class="fas fa-file-word" style="color:#2b579a;" title="Word"></i> <i class="fas fa-file-excel" style="color:#217346;" title="Excel"></i> <i class="fas fa-file-image" style="color:#673ab7;" title="Images"></i> <i class="fas fa-file-archive" style="color:#ff9800;" title="ZIP"></i> </div> </div> |
4. Teacher Summary – Quick Recap
Font Awesome 5 Currency Icons = W3Schools’ page listing free file format & document type icons like:
- file-pdf 📕
- file-word 📘
- file-excel 📗
- file-powerpoint 📙
- file-image 🖼️
- file-archive 📦
- file-code 💾
- file-csv 📊
- file-invoice-dollar 📄₹
- file-signature 📄✍️
- file-contract 📄
Very useful for:
- File upload/download previews
- Document lists / attachments
- Invoice / receipt sections
- “Supported formats” indicators
- CMS / admin panel file views
Got it now? Want me to:
- Build a full “File Upload + Download List + Invoice” demo page with these icons?
- Show how they look in a modern cloud storage / Google Drive-style UI?
- Compare FA5 vs FA6/7 file-type icons (way more file variants & status icons in newer versions)?
- Or move to the next category in the series?
Just tell your teacher — we’re handling files today! 📄📕📊💾🚀
