Chapter 79: Icons Writing
Writing Icons The table below shows the Free Font Awesome 5 Writing icons:
followed by the table with preview, class name, unicode value, and “Try it” button.
1. What is the “Icons Writing” page?
This page collects only the icons that represent writing, editing, typing, pens, pencils, paper, notebooks, quotes, signatures, formatting tools, and everything related to creating or editing written content.
These icons are extremely useful for:
- Blog / article / CMS editing interfaces
- “Write a Post” / “Create New Document” buttons
- Rich-text editor toolbars (WordPress, Medium, CKEditor style)
- Note-taking / journaling apps
- Signature / contract signing sections
- “Edit Profile” / “Write Bio” areas
- Quote / testimonial formatting
- “Draft” / “Publish” status indicators
- Stationery / office supply product pages
- “Handwritten” or “Calligraphy” design themes
In Font Awesome 5 free, the Writing category is small but very targeted — only about 12–18 icons (mostly solid fas style, some regular far). Font Awesome 6 and 7 later added many more (pen-line, pen-nib, pen-ruler, pencil-ruler, signature variants, quote-left/right, text-height/width, align-justify), but FA5 free already has the most commonly used writing & editing symbols that are still powering millions of blogs, CMS dashboards, and note-taking apps in 2026.
2. Main Free Writing Icons in Font Awesome 5 (From the W3Schools Page)
Here are the most important and frequently used ones (solid fas unless noted):
| Icon name | Class name | Looks like | Most common meaning / usage |
|---|---|---|---|
| pen | fas fa-pen | ✍️ Fountain pen | Write, edit, sign (very common) |
| pen-alt | fas fa-pen-alt | ✍️ Alternative pen | Slightly different style — often used for editing |
| pen-nib | fas fa-pen-nib | ✒️ Calligraphy nib | Calligraphy, signature, elegant writing |
| pen-square | fas fa-pen-square | ✍️ Pen in square | Edit button (very popular in admin panels) |
| pencil-alt | fas fa-pencil-alt | ✏️ Pencil | Classic edit / write icon |
| eraser | fas fa-eraser | 🧼 Eraser | Delete, remove, undo |
| quote-left | fas fa-quote-left | ❝ Opening quote | Blockquote start |
| quote-right | fas fa-quote-right | ❞ Closing quote | Blockquote end |
| sticky-note | fas fa-sticky-note | 📝 Post-it note | Note, reminder, draft (regular: far fa-sticky-note) |
| file-signature | fas fa-file-signature | 📄 Signed document | Contract, signed file, agreement |
| file-contract | fas fa-file-contract | 📄 Contract document | Legal document, terms & conditions |
| keyboard | fas fa-keyboard | ⌨️ Keyboard | Typing, writing on computer |
| font | fas fa-font | Aa Font | Font family / text style |
| text-height | fas fa-text-height | Aa↑↓ Line height | Adjust line spacing |
| text-width | fas fa-text-width | Aa←→ Text width | Adjust text width / letter spacing |
These are the core free Writing icons in FA5 — very clean and instantly understandable for any writing/editing context.
3. Real Code Examples – How to Use Writing Icons
Example 1: Rich-Text Editor Toolbar (very common in CMS)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div style="border:1px solid #ddd; padding:12px; background:#f8f9fa; border-radius:8px; display:flex; gap:12px; flex-wrap:wrap; margin:40px auto; max-width:700px;"> <button title="Bold"><i class="fas fa-bold"></i></button> <button title="Italic"><i class="fas fa-italic"></i></button> <button title="Underline"><i class="fas fa-underline"></i></button> <button title="Quote"><i class="fas fa-quote-left"></i></button> <button title="Link"><i class="fas fa-link"></i></button> <button title="Edit"><i class="fas fa-pen" style="color:#2196f3;"></i></button> <button title="Delete"><i class="fas fa-eraser" style="color:#f44336;"></i></button> </div> |
Example 2: “Write a Review” / “Add Comment” Button
|
0 1 2 3 4 5 6 7 8 9 |
<button style="background:#673ab7; color:white; padding:16px 32px; border:none; border-radius:50px; font-size:1.3rem; cursor:pointer; box-shadow:0 4px 12px rgba(103,58,183,0.3);"> <i class="fas fa-pen" style="margin-right:12px; font-size:1.6rem;"></i> Write a Review </button> |
Example 3: Signature / Contract Section
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div style="border:1px dashed #bbdefb; padding:40px; max-width:500px; margin:50px auto; border-radius:12px; text-align:center; background:#e3f2fd;"> <i class="fas fa-file-signature fa-7x" style="color:#673ab7; margin-bottom:25px;"></i> <h2>Sign Your Agreement</h2> <p style="font-size:1.4rem; margin:20px 0;"> <i class="fas fa-pen-nib" style="margin-right:8px; color:#2196f3;"></i> Digital Signature Required </p> <button style="background:#673ab7; color:white; padding:14px 28px; border:none; border-radius:50px;"> Sign Document </button> </div> |
Example 4: Note / Draft Indicator
|
0 1 2 3 4 5 6 7 8 9 |
<div style="display:inline-flex; align-items:center; gap:12px; padding:12px 24px; background:#fff3e0; border-radius:50px; font-size:1.3rem;"> <i class="fas fa-sticky-note" style="font-size:1.8rem; color:#ff9800;"></i> <span>Draft Saved • Last edited 2 min ago</span> </div> |
4. Teacher Summary – Quick Recap
Font Awesome 5 Writing Icons = W3Schools’ page listing free writing/editing icons like pen ✍️, pen-alt ✍️, pen-nib ✒️, pencil-alt ✏️, eraser 🧼, quote-left ❝, quote-right ❞, sticky-note 📝, file-signature 📄✍️, file-contract 📄, keyboard ⌨️, font Aa, etc.
Very useful for:
- Blog / CMS / note-taking apps
- Rich-text editor toolbars
- “Write” / “Edit” buttons
- Signature / contract sections
- Quote / testimonial formatting
Got it now? Want me to:
- Build a full “Blog Editor Toolbar” or “Note-Taking App” demo page with these icons?
- Show how they look in a modern Medium-style writing interface?
- Compare FA5 vs FA6/7 writing icons (way more formatting & pen styles in newer versions)?
- Or move to the next category in the series?
Just tell your teacher — we’re writing the future today! ✍️✏️📝🚀
