Chapter 28: Icons Design
1. What is the “Icons Design” Page?
This page collects only the icons that represent design tools, creative work, graphics, painting, drawing, editing, colors, layers, crop, pen, brush, and everything related to visual/graphic design.
These icons are perfect for:
- Graphic design portfolios / freelance designer websites
- “Tools I Use” sections (Adobe XD, Figma, Photoshop style)
- UI/UX design blogs or case studies
- Creative agency / studio homepages
- Design toolbars in web apps (crop, paint, pencil, eraser)
- “Sketch / Wireframe” or “Prototyping” badges
- Art & illustration tutorials
- Color palette pickers or swatches
In Font Awesome 5 free, the Design category is small but very targeted (around 8–12 icons, mostly solid fas style, some regular far). Newer versions (FA6/7) added many more (pen-ruler, vector-square, highlighter, fill-drip variants, etc.), but FA5 free already has the core essentials that most designers still use today.
2. Main Free Design Icons in Font Awesome 5 (From the W3Schools Page)
Here are the key free ones you’ll see listed (solid fas unless noted; these are the most common classics from FA5 free Design category):
- Pen (fountain pen / writing pen – sketching / editing) <i class=”fas fa-pen”></i>
- Pen Alt (alternative pen style – more modern) <i class=”fas fa-pen-alt”></i>
- Pen Nib (calligraphy / fountain pen nib) <i class=”fas fa-pen-nib”></i>
- Pen Square (pen inside square box – edit icon) <i class=”fas fa-pen-square”></i>
- Pencil Alt (pencil – classic drawing/editing tool) <i class=”fas fa-pencil-alt”></i>
- Paint Brush (artist’s paintbrush) <i class=”fas fa-paint-brush”></i>
- Paint Roller (wall painting roller) <i class=”fas fa-paint-roller”></i>
- Brush (broad paint brush) <i class=”fas fa-brush”></i>
- Fill Drip (paint bucket with drip – fill color tool) <i class=”fas fa-fill-drip”></i>
- Eraser (eraser tool – remove / undo) <i class=”fas fa-eraser”></i>
- Crop (crop tool – image cropping frame) <i class=”fas fa-crop”></i>
- Crop Alt (alternative crop style) <i class=”fas fa-crop-alt”></i>
- Vector Square (vector bounding box – design selection) <i class=”fas fa-vector-square”></i>
These are the core free Design icons — very clean and immediately recognizable to any designer.
3. Real Code Examples – How to Use Design Icons
Example 1: Designer Portfolio “Tools I Use” Section (very common)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- FA5 CDN in <head> --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <div style="text-align: center; padding: 50px 20px; background: #f8f9fa; border-radius: 12px;"> <h2>Tools I Love</h2> <div style="display: flex; justify-content: center; gap: 40px; font-size: 5rem; margin: 30px 0; color: #6f42c1;"> <i class="fas fa-pen-nib"></i> <i class="fas fa-paint-brush"></i> <i class="fas fa-fill-drip"></i> <i class="fas fa-crop-alt"></i> <i class="fas fa-vector-square"></i> </div> <p>Figma • Adobe XD • Photoshop • Illustrator</p> </div> |
Example 2: “Edit Design” Button (portfolio or CMS)
|
0 1 2 3 4 5 6 7 8 9 |
<button style="background: #6f42c1; color: white; padding: 14px 28px; border: none; border-radius: 8px; font-size: 1.2rem; cursor: pointer;"> <i class="fas fa-pen" style="margin-right: 10px; font-size: 1.5rem;"></i> Edit This Design </button> |
Example 3: Color Fill / Palette Tool Icon
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<div style="font-size: 6rem; text-align: center; color: #e91e63; margin: 40px 0;"> <i class="fas fa-fill-drip"></i> <p style="font-size: 1.6rem; margin-top: 20px; color: #424242;"> Color Picker & Fill Tool </p> </div> |
Example 4: Design Process Steps (agency site)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 30px; margin: 50px 0;"> <div style="text-align: center; max-width: 200px;"> <i class="fas fa-pencil-alt" style="font-size: 4rem; color: #007bff;"></i> <h4>Sketch</h4> </div> <div style="text-align: center; max-width: 200px;"> <i class="fas fa-vector-square" style="font-size: 4rem; color: #28a745;"></i> <h4>Vector Design</h4> </div> <div style="text-align: center; max-width: 200px;"> <i class="fas fa-paint-roller" style="font-size: 4rem; color: #ff9800;"></i> <h4>Color & Texture</h4> </div> <div style="text-align: center; max-width: 200px;"> <i class="fas fa-crop" style="font-size: 4rem; color: #dc3545;"></i> <h4>Crop & Export</h4> </div> </div> |
Example 5: “Under Construction – Designer at Work” Fun Banner
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div style="text-align: center; padding: 60px 20px; background: #fff3e0; border-radius: 12px;"> <i class="fas fa-paint-brush" style="font-size: 7rem; color: #673ab7; margin-bottom: 20px; animation: wiggle 2s infinite;"></i> <h1>Under Construction</h1> <p style="font-size: 1.4rem;">Our designer is currently painting something beautiful...</p> </div> <style> @keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(10deg); } 75% { transform: rotate(-10deg); } } </style> |
4. Teacher Tips for Design Icons
- Colors — Creative & vibrant: purples (#6f42c1) for pen/tools (creativity), blues (#007bff) for precision, oranges (#ff9800) for paint/roller, pinks (#e91e63) for fill-drip.
- Size & animation — Big sizes (fa-5x, fa-7x) shine on portfolio heroes; add subtle CSS animations (wiggle, pulse) for “creative work in progress” feel.
- Combine categories — Pair with Code (laptop-code for digital design), Art (palette from later versions), or Computers (desktop) for full design workflow.
- Accessibility — Use with clear text like “Edit with Pen Tool” or add aria-label=”Design editing icon”; hide decorative ones with aria-hidden=”true”.
- Upgrade note — In Font Awesome 6/7, Design category is much richer (pen-ruler, highlighter, fill, object-ungroup, vector) — upgrade if building a modern design agency site.
Summary – Quick Recap
Font Awesome 5 Design Icons = W3Schools’ page listing free design/creative icons like pen ✍️, pencil-alt ✏️, paint-brush 🖌️, fill-drip 🪣, crop ✂️, vector-square ⬚, eraser 🧼, etc. Perfect for graphic designers, UI/UX portfolios, creative agencies, design toolbars, “Sketch / Edit” buttons, or any visual/art/creative theme.
Understood now? Want me to:
- Build a full “Graphic Designer Portfolio” mini-page demo with these icons?
- Show a colorful “Tools of the Trade” section?
- Compare FA5 vs newer versions (way more design tools)?
- Or next category like “Icons Editors”?
Just tell your teacher — we’re designing the future one icon at a time! 🖌️✏️🎨🚀
