Chapter 107: Icons Editor
What is Google Editor Icons
Let me explain it very slowly, very clearly, and very honestly — the way a good teacher should.
Short & truthful answer first
There is no official icon set called “Google Editor Icons” in 2026.
Google does not publish, distribute, or officially name any library as “Google Editor Icons”, “Google Editing Icons”, “Google Docs Icons”, “Google Workspace Editor Icons”, or anything similar.
When people search or ask for “Google Editor Icons” (especially in 2025–2026), they are almost always making one of these four common mix-ups / assumptions:
- They mean Material Symbols (Google’s current official icon library) and are looking for icons that appear in Google Docs, Google Sheets, Google Slides, Google Keep, Google Forms, or other Google editing/creation tools.
- They saw someone use the phrase “editor icons” or “Google editor icons” in a tutorial, blog post, Reddit thread, Figma community file, or design system documentation and thought it was an official Google product name (it isn’t — it’s just a descriptive term).
- They are thinking of the icons that appear in the toolbar / menu bar of Google Workspace editors (bold, italic, underline, align left, bullet list, insert image, insert table, etc.) — but those icons are not published as a separate “Editor Icons” library.
- They are confusing it with one of the many icon sets that mimic Google Workspace style (Material Symbols, Font Awesome, Bootstrap Icons, etc.).
Bottom line (write this down):
There is no separate “Google Editor Icons” library. The icons you are most likely looking for are part of Material Symbols — Google’s official, free, modern icon system.
2. Where the confusion comes from (important context – 2 minutes)
In the old Material Icons days (2014–2022):
- Icons were organized in folders/categories with short codes
- Many editor-related icons were grouped under categories like editor, action, content, image, av, etc. → so you had names like editor_format_bold, editor_format_italic, editor_format_list_bulleted, editor_insert_photo, etc.
People started calling them “editor icons” or “Google editor icons” in tutorials and code comments.
Then Google changed everything:
- 2022–2023 → Material Symbols (variable font system) → all category prefixes disappeared → now every icon has a simple, descriptive English name: format_bold, format_italic, format_list_bulleted, insert_photo, table, draw, etc.
So in 2026:
- There is no “Editor” category anymore
- There is no “Google Editor Icons” product
- All the icons people used to call “editor icons” are now just normal Material Symbols with normal names
3. The real icons people want when they ask for “Google Editor Icons” (2026 list)
These are the most common editor/toolbar icons from Material Symbols that appear in Google Docs, Sheets, Slides, Forms, Keep, etc.
All of them are available in Outlined / Rounded / Sharp styles.
| What you see in Google Docs/Sheets/Slides | Current Material Symbols name (2026) | Looks like (description) | Very common real-world usage in 2026 |
|---|---|---|---|
| Bold | format_bold | B | Make text bold |
| Italic | format_italic | I | Make text italic |
| Underline | format_underlined | U̲ | Underline text |
| Strikethrough | format_strikethrough | S̶t̶r̶i̶k̶e̶t̶h̶r̶o̶u̶g̶h̶ | Strikethrough text |
| Bullet list | format_list_bulleted | • • • | Unordered list |
| Numbered list | format_list_numbered | 1. 2. 3. | Ordered list |
| Align left | format_align_left | ≡ left | Left align |
| Align center | format_align_center | ≡ center | Center align |
| Align right | format_align_right | ≡ right | Right align |
| Justify | format_align_justify | ≡ justified | Justify full |
| Increase indent | format_indent_increase | →→ | Indent right |
| Decrease indent | format_indent_decrease | ←← | Outdent left |
| Insert image / photo | add_photo_alternate | 🖼️ + ➕ | Insert picture |
| Insert table | table | ▦ table grid | Insert table |
| Insert link | link | 🔗 chain link | Add hyperlink |
| Insert comment | add_comment | 💬 + ➕ | Add comment / suggestion |
| Draw / scribble | draw | ✏️ free draw | Scribble / drawing mode |
4. Real, copy-paste examples (how people actually use these icons in 2026)
Example 1: Mini rich-text toolbar (Google Docs style)
|
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 |
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <div style="border:1px solid #dadce0; padding:12px; background:#f8f9fa; border-radius:8px; display:flex; gap:12px; flex-wrap:wrap; max-width:700px; margin:40px auto;"> <button title="Bold"><span class="material-symbols-outlined">format_bold</span></button> <button title="Italic"><span class="material-symbols-outlined">format_italic</span></button> <button title="Underline"><span class="material-symbols-outlined">format_underlined</span></button> <button title="Strikethrough"><span class="material-symbols-outlined">format_strikethrough</span></button> <span style="border-left:1px solid #dadce0; margin:0 8px;"></span> <button title="Bullet list"><span class="material-symbols-outlined">format_list_bulleted</span></button> <button title="Numbered list"><span class="material-symbols-outlined">format_list_numbered</span></button> <span style="border-left:1px solid #dadce0; margin:0 8px;"></span> <button title="Align left"><span class="material-symbols-outlined">format_align_left</span></button> <button title="Align center"><span class="material-symbols-outlined">format_align_center</span></button> <button title="Align right"><span class="material-symbols-outlined">format_align_right</span></button> <button title="Justify"><span class="material-symbols-outlined">format_align_justify</span></button> <span style="border-left:1px solid #dadce0; margin:0 8px;"></span> <button title="Insert image"><span class="material-symbols-outlined">add_photo_alternate</span></button> <button title="Insert table"><span class="material-symbols-outlined">table</span></button> </div> |
Example 2: “New Document” / “Create Content” button
|
0 1 2 3 4 5 6 7 8 9 |
<button style="background:#1a73e8; color:white; padding:16px 32px; border:none; border-radius:50px; font-size:1.2rem; cursor:pointer; display:flex; align-items:center; gap:12px;"> <span class="material-symbols-outlined" style="font-size:28px;">description</span> New Document </button> |
Example 3: Comment / suggestion button
|
0 1 2 3 4 5 6 7 8 9 |
<button style="background:#fbbc05; color:#202124; padding:12px 24px; border:none; border-radius:50px; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; gap:10px;"> <span class="material-symbols-outlined" style="font-size:24px;">add_comment</span> Add Comment </button> |
Teacher Summary – Quick Truth Table (March 2026)
| Question | Honest Answer (2026) |
|---|---|
| Is there an official library called “Google Editor Icons” or “Google Content Icons”? | No |
| Is there a special “Editor” category inside Google icons? | No (used to exist in very old Material Icons naming) |
| Where do the bold/italic/underline/list/table icons come from? | Material Symbols (Google’s current official icon library) |
| Current best icon names for editor features? | format_bold, format_italic, format_underlined, format_list_bulleted, format_list_numbered, format_align_left/center/right/justify, add_photo_alternate, table, link, comment, draw |
| Best way to use them in 2026? | Material Symbols via Google Fonts CDN (variable font) |
| Number of editor-related icons available? | ~60–100 (plenty for any rich-text editor or CMS toolbar) |
Final Teacher Advice
If you want Google-style editor icons (bold, italic, underline, lists, alignment, insert image/table/link/comment, etc.) in 2026:
→ Use Material Symbols → Take icons named: format_bold, format_italic, format_underlined, format_list_bulleted, format_align_left, table, add_photo_alternate, link, comment, draw, etc. → Use blue (#1a73e8) for active/selected states and gray (#757575) for inactive ones to match real Google Workspace apps look
Got it now? Want me to:
- Build a full mini rich-text toolbar demo (like Google Docs) using only Material Symbols?
- Show side-by-side comparison of Material Symbols vs Font Awesome 5 editor icons?
- Give you ready-to-copy Material Symbols CDN code + several editor UI examples?
- Or go back to the Font Awesome 5 categories?
Just raise your hand — teacher is ready! B I U̲ ••• ▦ ✏️ 🚀
