Engineering handover · qc1.pitchdeck.io · 17 Aug 2026

Editor icon swap

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.

40icons to change
36swap to a Phosphor glyph
4become text buttons instead
3delivery methods to collapse into one

The work, in three parts

1

Delete the appicon font

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.

2

Move the SVG icons onto the Phosphor font, at one weight

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.

3

Move slide status off loose SVG files

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.

Same command, two icons

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.

MenuTodayChange to
Slide right-clickic_duplicate_outline (appicon)ph-cards-three
Bottom bar overflowph-copyph-cards-three

Slide right-click menu

7 icons

Right-click any slide thumbnail in the left rail. Every command icon is appicon; the five status icons are loose SVG files.

Slide right-click menu
Slide right-click menu, as it renders today

Slide status icons

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.

  • svg
    file

    ic_no_status.svg ph-circle-dashed

    No Status. Grey.

    Ready
  • svg
    file

    ic_todo.svg ph-record

    To-do. Red.

    Ready
  • svg
    file

    ic_in_progress.svg ph-circle-half

    In-progress. Amber.

    Ready
  • svg
    file

    ic_delayed.svg ph-minus-circle

    Delayed. Orange.

    Ready
  • svg
    file

    ic_done.svg ph-check-circle

    Done. Green, fill weight to keep the solid disc.

    Ready

Top bar

1 icon

In the avatar stack, opens the invite flow.

Top bar
Top bar, as it renders today

Text element toolbar

9 icons

Floats above any selected text element. Entirely appicon.

Text element toolbar
Text element toolbar, as it renders today

Text properties panel

11 icons

Opens from the gear in the text toolbar. The text case row sits below the fold.

Text properties panel
Text properties panel, as it renders today

Image element toolbar

3 icons

Floats above any selected image.

Image element toolbar
Image element toolbar, as it renders today

Elsewhere in the editor

5 icons

Present in the editor DOM, rendering on hover or in flows not opened during the audit. Confirm in context before swapping.

One control changes shape, not just its icon

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.

Today, four appicon glyphs
none
uppercase
titlecase
lowercase
After, four text buttons
NoneAA Aaaa

This is what makes part 1 finishable. Keep these as glyphs and appicon.woff ships forever for four icons.

Full mapping

41 rows

Everything above in one table. Rows with no Phosphor name either become text buttons or stay as they are.

SurfaceTodayPhosphorStatus
Slide right-click menuic_add_onph-plusReady
Slide right-click menuic_exploreph-magic-wandReady
Slide right-click menuic_trim_videoph-scissorsReady
Slide right-click menuic_fileph-copyReady
Slide right-click menuic_save_slide_as_templateph-clipboard-textReady
Slide right-click menuic_duplicate_outlineph-cards-threeReady
Slide right-click menuic_delete_outlineph-trashReady
Slide right-click menu (status)ic_no_status.svgph-circle-dashedReady
Slide right-click menu (status)ic_todo.svgph-recordReady
Slide right-click menu (status)ic_in_progress.svgph-circle-halfReady
Slide right-click menu (status)ic_delayed.svgph-minus-circleReady
Slide right-click menu (status)ic_done.svgph-check-circleReady
Top baric_arrow_plusph-plusReady
Text element toolbaric_text_sizeph-text-aaReady
Text element toolbaric_down_pointer_floaterph-caret-downReady
Text element toolbaric_minus_smallph-minusReady
Text element toolbaric_add_smallph-plusReady
Text element toolbaric_text_colorph-text-a-underlineReady
Text element toolbaric_text_align_leftph-text-align-leftReady
Text element toolbaric_text_format_boldph-text-bReady
Text element toolbaric_text_format_italicsph-text-italicReady
Text element toolbaric_slide_settingph-gearReady
Text properties panelic_more_optionph-dots-threeReady
Text properties panelic_text_align_centerph-text-align-centerReady
Text properties panelic_text_align_rightph-text-align-rightReady
Text properties panelic_text_align_justifiedph-text-align-justifyReady
Text properties panelic_text_align_topph-align-topReady
Text properties panelic_text_align_center_positionph-align-center-verticalReady
Text properties panelic_text_align_bottomph-align-bottomReady
Text properties panelic_arrow_no_headn/ano changeReady
Text properties panelic_uppercasen/ano changeReady
Text properties panelic_titlecasen/ano changeReady
Text properties panelic_lowercasen/ano changeReady
Image element toolbaric_upload_imageph-cloud-arrow-upReady
Image element toolbaric_update_shareph-arrows-clockwiseReady
Image element toolbaric_cropph-cropReady
Elsewhere in the editoric_more_option_verticalph-dots-three-verticalReady
Elsewhere in the editoric_drag_outlineph-dots-six-verticalReady
Elsewhere in the editoric_closeph-xReady
Elsewhere in the editoric_addph-plusReady
Elsewhere in the editoric_driven/ano changeReady
Same mapping as JSON
{
  "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
}

Surfaces already on Phosphor

no work

Listed so nobody re-does them.

SurfaceNote
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 modalPlus PowerPoint, Slides and PDF brand logos, which stay
Top bar and bottom bar chromeWeight and size still need part 2