Chapter 87: Icons Form
1. What is the “Icons Form” page?
This page lists only the icons that are most commonly used inside HTML forms, input fields, buttons, checkboxes, radio buttons, select dropdowns, file uploads, search bars, login/signup screens, and other interactive form elements.
These icons help make forms:
- more beautiful
- more intuitive
- more accessible
- more consistent with modern UI design
They are extremely common on:
- Login / registration / forgot password forms
- Contact / feedback / survey forms
- Search bars
- Newsletter subscription boxes
- Payment / checkout forms
- Profile edit / account settings pages
- File upload areas
- Dropdown / select menus
- Checkbox / radio group styling
- “Required field” indicators
In Font Awesome 5 free the Form category is small but extremely useful — only about 12–18 icons (mostly solid fas style, very few regular far). Font Awesome 6 and 7 added many more (square-check, square-xmark, circle-check, input-text, input-password, select, textarea), but FA5 free already has the classic form symbols that are still used on millions of websites and apps in 2026.
2. The actual free Form icons in Font Awesome 5
Here are the most important and frequently used ones from the W3Schools page (solid fas unless noted):
| Icon name | Class name | Looks like | Most common real-world usage in forms |
|---|---|---|---|
| user | fas fa-user | 👤 | Username / full name field |
| envelope | fas fa-envelope | ✉️ | Email address field |
| lock | fas fa-lock | 🔒 | Password field |
| key | fas fa-key | 🔑 | API key, password recovery, access token |
| phone | fas fa-phone | 📞 | Phone / mobile number field |
| search | fas fa-search | 🔍 | Search input / filter bar |
| calendar-alt | fas fa-calendar-alt | 📅 | Date picker / birthday field |
| clock | fas fa-clock | 🕒 | Time picker / appointment time |
| map-marker-alt | fas fa-map-marker-alt | 📍 | Location / address field |
| globe | fas fa-globe | 🌍 | Website URL field |
| file-upload | fas fa-file-upload | ↑ 📄 | File / document upload button |
| file-download | fas fa-file-download | ↓ 📄 | Download invoice / receipt |
| eye | fas fa-eye | 👁️ | Show password (toggle) |
| eye-slash | fas fa-eye-slash | 🙈 | Hide password (toggle) |
| check-square | fas fa-check-square | ☑️ | Checkbox checked state |
| square | fas fa-square | □ | Checkbox unchecked state |
| dot-circle | fas fa-dot-circle | ◉ | Radio button selected state |
| circle | fas fa-circle | ○ | Radio button unselected state |
These are the core free Form icons in Font Awesome 5 — very clean and instantly understandable for any form-related context.
3. Real Code Examples – How Developers Actually Use Form Icons
Example 1: Modern Login Form (very common pattern)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<div style="max-width:420px; margin:80px auto; padding:40px; background:#f8f9fa; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.1);"> <h2 style="text-align:center; margin-bottom:30px;">Login to Your Account</h2> <!-- Email field --> <div style="position:relative; margin-bottom:25px;"> <input type="email" placeholder="Email address" style="width:100%; padding:14px 18px 14px 50px; border:1px solid #ddd; border-radius:6px; font-size:1.1rem;"> <i class="fas fa-envelope" style="position:absolute; left:18px; top:50%; transform:translateY(-50%); color:#757575;"></i> </div> <!-- Password field with show/hide toggle --> <div style="position:relative; margin-bottom:25px;"> <input type="password" placeholder="Password" id="password" style="width:100%; padding:14px 50px 14px 18px; border:1px solid #ddd; border-radius:6px; font-size:1.1rem;"> <i class="fas fa-lock" style="position:absolute; left:18px; top:50%; transform:translateY(-50%); color:#757575;"></i> <i class="fas fa-eye-slash toggle-password" style="position:absolute; right:18px; top:50%; transform:translateY(-50%); color:#757575; cursor:pointer;"></i> </div> <button style="width:100%; padding:15px; background:#673ab7; color:white; border:none; border-radius:6px; font-size:1.2rem; cursor:pointer;"> Sign In </button> </div> <script> // Simple show/hide password toggle document.querySelector('.toggle-password').addEventListener('click', function () { const password = document.getElementById('password'); const type = password.getAttribute('type') === 'password' ? 'text' : 'password'; password.setAttribute('type', type); this.classList.toggle('fa-eye'); this.classList.toggle('fa-eye-slash'); }); </script> |
Example 2: Search Bar with Icon
HTML
|
0 1 2 3 4 5 6 7 8 9 |
<div style="max-width:500px; margin:50px auto; position:relative;"> <input type="search" placeholder="Search products, categories, brands…" style="width:100%; padding:16px 20px 16px 50px; border:1px solid #ddd; border-radius:50px; font-size:1.1rem;"> <i class="fas fa-search" style="position:absolute; left:18px; top:50%; transform:translateY(-50%); color:#757575; font-size:1.3rem;"></i> </div> |
Example 3: File Upload Field
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div style="border:2px dashed #bbdefb; padding:50px; max-width:500px; margin:50px auto; border-radius:12px; text-align:center; background:#e3f2fd;"> <i class="fas fa-file-upload fa-6x" style="color:#2196f3; margin-bottom:20px;"></i> <h3>Upload Your Document</h3> <p style="font-size:1.3rem; color:#555; margin:15px 0;"> Click or drag files here<br> <small>Supported: PDF, Word, Excel, Images</small> </p> </div> |
Example 4: Checkbox & Radio Button Styling
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div style="max-width:400px; margin:50px auto; font-size:1.3rem;"> <label style="display:flex; align-items:center; gap:12px; margin-bottom:15px; cursor:pointer;"> <i class="fas fa-check-square" style="color:#4caf50; font-size:1.6rem;"></i> I agree to the terms and conditions </label> <label style="display:flex; align-items:center; gap:12px; margin-bottom:15px; cursor:pointer;"> <i class="fas fa-dot-circle" style="color:#2196f3; font-size:1.6rem;"></i> Male </label> <label style="display:flex; align-items:center; gap:12px; cursor:pointer;"> <i class="far fa-circle" style="color:#757575; font-size:1.6rem;"></i> Female </label> </div> |
4. Teacher Summary – Quick Recap
Font Awesome 5 Form Icons = very small but extremely useful category → only about 12–18 icons:
- user 👤 (username)
- envelope ✉️ (email)
- lock 🔒 (password)
- search 🔍 (search bar)
- calendar-alt 📅 (date picker)
- phone 📞 (phone number)
- file-upload ↑📄 (upload)
- eye / eye-slash 👁️🙈 (show/hide password)
- check-square ☑️ / square □ (checkbox)
- dot-circle ◉ / circle ○ (radio button)
Very useful for:
- Login / signup / contact forms
- Search bars
- File upload areas
- Checkbox / radio styling
- Date / time pickers
- Password toggle fields
Got it now? Want me to:
- Build a full modern login form + contact form + file upload demo page using these icons?
- Show how they look in a clean SaaS / fintech signup flow?
- Compare FA5 vs FA6/7 form icons (way more input-related icons in newer versions)?
- Or move to the next category in the series?
Just raise your hand — teacher is ready! 🔒✉️🔍📅🚀
