Engineering handover · qc1.pitchdeck.io · 17 Aug 2026
The editor renders icons three different ways and only one of them is the Phosphor pack we standardise on. This is the full list of what to change, where it lives, and what it becomes. Every glyph below is rendered from the real font files, so the icon you see in the right-hand column is the icon you will get.
appicon.woff is a custom icon font with 699 glyphs, unrelated to Phosphor.
In the editor it owns the slide right-click menu, the text element toolbar, the text properties panel and
the image element toolbar. Every one of its glyphs has a Phosphor replacement listed below.
Heads up on the class names: several no longer describe what they draw. ic_trim_video
renders Cut, ic_save_slide_as_template renders Paste, ic_file
renders Copy. Go by the described action, not the class name.
The editor's SVG icons are legacy phosphor-react markup: a 256 background rect
plus stroked paths. That is the old delivery, not the font in design-system/icons.
Weight is inconsistent within a single screen: 11 icons carry stroke-width="24"
(bold) and 35 carry stroke-width="16" (regular). Everything goes to
regular. Sizes are spread across 12, 16, 18 and 20 px against a steady 20 px on the
dashboard; settle on one scale rather than four.
The five status icons are <img> tags pointing at
/docs/assets/images/status/. Their colour is baked into each file, so it cannot
follow a token or respond to theme. Phosphor covers all five; set the colour in CSS.
Duplicate slide appears in the
right-click menu and in the bottom bar overflow menu, drawn from a different pack in each. Both must land on
ph-cards-three, which means the bottom bar menu changes too even though it is already
Phosphor today.
| Menu | Today | Change to |
|---|---|---|
| Slide right-click | ic_duplicate_outline (appicon) | ph-cards-three |
| Bottom bar overflow | ph-copy | ph-cards-three |
Right-click any slide thumbnail in the left rail. Every command icon is appicon; the five status icons are loose SVG files.
Not font glyphs. Five standalone files under /docs/assets/images/status/ loaded as <img>, so their colour is baked in and cannot follow a token or respond to theme. Move them to the font and set the colour in CSS.
In the avatar stack, opens the invite flow.
Floats above any selected text element. Entirely appicon.
Opens from the gear in the text toolbar. The text case row sits below the fold.
Floats above any selected image.
Present in the editor DOM, rendering on hover or in flows not opened during the audit. Confirm in context before swapping.
The text case row in Text properties is the only item here that is not a straight icon swap. Phosphor has no uppercase, title case or lowercase icon, so the four buttons become text instead, the way Figma and Google Docs do it. Behaviour is unchanged, only the button contents.
This is what makes part 1 finishable.
Keep these as glyphs and appicon.woff ships forever for four icons.
Everything above in one table. Rows with no Phosphor name either become text buttons or stay as they are.
| Surface | Today | Phosphor | Status | |
|---|---|---|---|---|
| Slide right-click menu | ic_add_on | | ph-plus | Ready |
| Slide right-click menu | ic_explore | | ph-magic-wand | Ready |
| Slide right-click menu | ic_trim_video | | ph-scissors | Ready |
| Slide right-click menu | ic_file | | ph-copy | Ready |
| Slide right-click menu | ic_save_slide_as_template | | ph-clipboard-text | Ready |
| Slide right-click menu | ic_duplicate_outline | | ph-cards-three | Ready |
| Slide right-click menu | ic_delete_outline | | ph-trash | Ready |
| Slide right-click menu (status) | ic_no_status.svg | | ph-circle-dashed | Ready |
| Slide right-click menu (status) | ic_todo.svg | | ph-record | Ready |
| Slide right-click menu (status) | ic_in_progress.svg | | ph-circle-half | Ready |
| Slide right-click menu (status) | ic_delayed.svg | | ph-minus-circle | Ready |
| Slide right-click menu (status) | ic_done.svg | | ph-check-circle | Ready |
| Top bar | ic_arrow_plus | | ph-plus | Ready |
| Text element toolbar | ic_text_size | | ph-text-aa | Ready |
| Text element toolbar | ic_down_pointer_floater | | ph-caret-down | Ready |
| Text element toolbar | ic_minus_small | | ph-minus | Ready |
| Text element toolbar | ic_add_small | | ph-plus | Ready |
| Text element toolbar | ic_text_color | | ph-text-a-underline | Ready |
| Text element toolbar | ic_text_align_left | | ph-text-align-left | Ready |
| Text element toolbar | ic_text_format_bold | | ph-text-b | Ready |
| Text element toolbar | ic_text_format_italics | | ph-text-italic | Ready |
| Text element toolbar | ic_slide_setting | | ph-gear | Ready |
| Text properties panel | ic_more_option | | ph-dots-three | Ready |
| Text properties panel | ic_text_align_center | | ph-text-align-center | Ready |
| Text properties panel | ic_text_align_right | | ph-text-align-right | Ready |
| Text properties panel | ic_text_align_justified | | ph-text-align-justify | Ready |
| Text properties panel | ic_text_align_top | | ph-align-top | Ready |
| Text properties panel | ic_text_align_center_position | | ph-align-center-vertical | Ready |
| Text properties panel | ic_text_align_bottom | | ph-align-bottom | Ready |
| Text properties panel | ic_arrow_no_head | n/a | no change | Ready |
| Text properties panel | ic_uppercase | n/a | no change | Ready |
| Text properties panel | ic_titlecase | n/a | no change | Ready |
| Text properties panel | ic_lowercase | n/a | no change | Ready |
| Image element toolbar | ic_upload_image | | ph-cloud-arrow-up | Ready |
| Image element toolbar | ic_update_share | | ph-arrows-clockwise | Ready |
| Image element toolbar | ic_crop | | ph-crop | Ready |
| Elsewhere in the editor | ic_more_option_vertical | | ph-dots-three-vertical | Ready |
| Elsewhere in the editor | ic_drag_outline | | ph-dots-six-vertical | Ready |
| Elsewhere in the editor | ic_close | | ph-x | Ready |
| Elsewhere in the editor | ic_add | | ph-plus | Ready |
| Elsewhere in the editor | ic_drive | n/a | no change | Ready |
{
"ic_add_on": "ph-plus",
"ic_explore": "ph-magic-wand",
"ic_trim_video": "ph-scissors",
"ic_file": "ph-copy",
"ic_save_slide_as_template": "ph-clipboard-text",
"ic_duplicate_outline": "ph-cards-three",
"ic_delete_outline": "ph-trash",
"ic_no_status.svg": "ph-circle-dashed",
"ic_todo.svg": "ph-record",
"ic_in_progress.svg": "ph-circle-half",
"ic_delayed.svg": "ph-minus-circle",
"ic_done.svg": "ph-check-circle",
"ic_arrow_plus": "ph-plus",
"ic_text_size": "ph-text-aa",
"ic_down_pointer_floater": "ph-caret-down",
"ic_minus_small": "ph-minus",
"ic_add_small": "ph-plus",
"ic_text_color": "ph-text-a-underline",
"ic_text_align_left": "ph-text-align-left",
"ic_text_format_bold": "ph-text-b",
"ic_text_format_italics": "ph-text-italic",
"ic_slide_setting": "ph-gear",
"ic_more_option": "ph-dots-three",
"ic_text_align_center": "ph-text-align-center",
"ic_text_align_right": "ph-text-align-right",
"ic_text_align_justified": "ph-text-align-justify",
"ic_text_align_top": "ph-align-top",
"ic_text_align_center_position": "ph-align-center-vertical",
"ic_text_align_bottom": "ph-align-bottom",
"ic_arrow_no_head": "text:None",
"ic_uppercase": "text:AA",
"ic_titlecase": "text:Aa",
"ic_lowercase": "text:aa",
"ic_upload_image": "ph-cloud-arrow-up",
"ic_update_share": "ph-arrows-clockwise",
"ic_crop": "ph-crop",
"ic_more_option_vertical": "ph-dots-three-vertical",
"ic_drag_outline": "ph-dots-six-vertical",
"ic_close": "ph-x",
"ic_add": "ph-plus",
"ic_drive": null
}
Listed so nobody re-does them.
| Surface | Note |
|---|---|
| Slide options menu (bottom bar overflow) | Only Duplicate slide changes, see above |
| Presentation menu (top bar overflow) | Regenerate thumbnails has no icon at all |
| Insert panel | — |
| Edit with AI panel | — |
| Export modal | Plus PowerPoint, Slides and PDF brand logos, which stay |
| Top bar and bottom bar chrome | Weight and size still need part 2 |