Chapter 64: Icons Shapes

Shapes Icons

This is — as always — the classic W3Schools reference/cheat-sheet page that lists all free Font Awesome 5 icons belonging to the Shapes category.

URL (still working in February 2026): https://www.w3schools.com/icons/fontawesome5_icons_shapes.asp

It’s usually placed after “Security” or “Social” and before “Spinners” or “Status” in their sidebar. The page opens with the short intro:

Shapes Icons The table below shows the Free Font Awesome 5 Shapes icons:

…followed by the familiar table with preview, class name, unicode, and “Try it” button.

1. What does the “Icons Shapes” page contain?

This category contains only icons that represent geometric shapes, basic forms, and simple visual building blocks — circles, squares, rectangles, triangles, stars, hearts, clouds, etc.

These icons are mainly used for:

• UI design elements (avatars, badges, loaders, placeholders)
• Graphic design / illustration placeholders
• “Shape” selectors in drawing tools / editors
• Decorative separators, bullet points, or highlights
• Progress indicators (circle progress, star rating)
• Minimalist buttons or tags
• “Random shape” or “geometric pattern” backgrounds
• Kids’ education / shape recognition pages
• Abstract / modern website design accents

In Font Awesome 5 free the Shapes category is small and focused — only about 12–18 really useful icons (mostly solid fas, very few regular far). Font Awesome 6 and 7 later added many more (shapes variants, star-of-life, star-shooting, circle-half-stroke, square-caret, triangle-exclamation), but FA5 already gives you the most essential geometric shapes that are still very widely used in UI design, placeholders, and minimalist websites in 2026.

2. The actual free Shapes icons in Font Awesome 5

Here are the most important / most frequently used ones from the W3Schools page (solid fas style unless noted):

These are basically the complete useful set for the Shapes category in Font Awesome 5 free.

Missing in FA5 free (but added in FA6/7 free):

• triangle, square-caret, circle-half-stroke, star-shooting, diamond, heart-half-stroke, moon-stars, hexagon, octagon, pentagon, star-exclamation, etc.

3. Real-world usage examples (copy-paste ready)

Example 1 – Star Rating Component (very common)

Example 2 – Loading Spinner using Shapes

Example 3 – Minimal Avatar / Placeholder (using circle)

Example 4 – “Verified” / Certificate Badge

Example 5 – Simple Shape Decorators / Bullets

4. Quick Teacher Summary – FA5 Shapes Icons (2026 reality)

• How many real shape/form icons are there in FA5 free? → Around 8–12 truly useful ones (circle, square, star, star-half-alt, certificate, adjust, dot-circle, shapes)
• Is there a triangle / hexagon / pentagon / octagon? → No — those came in Font Awesome 6 free
• Best alternatives in 2026 if you need a richer shapes set
  1. Font Awesome 6 or 7 (free version) → much better geometric shapes collection
  2. Google Material Symbols → excellent circle, square, triangle, star, hexagon, etc.
  3. Bootstrap Icons → good basic shapes
  4. Tabler Icons → very complete shapes & geometry set
  5. Heroicons / Lucide → modern line-style shapes

So in short: Font Awesome 5 Shapes Icons = small but usable set → circle ●, square ■, star ★, star-half-alt ⯪, certificate ✪, adjust ◐, dot-circle ◉, shapes ▲■●

Got it now? Want me to:

• Build a full “Star Rating + Loading + Placeholders” demo page with these icons?
• Show how they look in a modern UI kit / avatar placeholder style?
• Compare FA5 vs FA6/7 shapes icons (way more geometric forms in newer versions)?
• Or move to the next category in the series?

Just raise your hand — teacher is ready! ● ■ ★ ✪ 🚀