[wp-trac] [WordPress Trac] #65387: Administration: Replace Dashicons icon font with @wordpress/icons SVGs in the admin menu

[WordPress Trac]

#65387: Administration: Replace Dashicons icon font with @wordpress/icons SVGs in
the admin menu
-------------------------------------------------+-------------------------
 Reporter:  lucasmdo                             |      Owner:  (none)
     Type:  enhancement                          |     Status:  new
 Priority:  normal                               |  Milestone:  Awaiting
                                                 |  Review
Component:  Administration                       |    Version:
 Severity:  normal                               |   Keywords:  needs-patch
  Focuses:  ui, accessibility, css, rtl,         |
  administration, performance                    |
-------------------------------------------------+-------------------------
 == Problem / Current Behavior ==

 The admin sidebar menu draws its top-level icons using the Dashicons icon
 font. This is the same legacy approach described in the parent ticket
 #65089, seen here specifically in the left-hand admin navigation.


 == Proposed Enhancement ==

 Replace the Dashicons font icons on Core's '''default''' top-level admin
 menu items with SVG icons from the @wordpress/icons library — the same set
 already used by the editors. The icons keep their current look, position,
 and labels; only the underlying technique changes.

 Worth noting: Core already supports SVG icons for admin menu items (via
 the menu icon API) and already recolors them to match the active color
 scheme (#25147), so the rendering path for SVG menu icons exists today.
 This ticket applies that direction to Core's own default items.

 '''In scope''' — Core's own default top-level menu icons (Dashboard,
 Posts, Media, Pages, Comments, Appearance, Plugins, Users, Tools,
 Settings) and the "Collapse menu" button icon at the bottom of the menu
 (#50423).

 '''Out of scope''':

  * Menu icons added by plugins or themes → see Backward Compatibility.
  * Restructuring or grouping the navigation itself → this ticket only
 changes the icon technique.
  * The admin bar icons → handled by the sibling Toolbar ticket in this
 series (#65386).

 == Rationale ==

  * '''Consistency''': brings the admin menu in line with the icon set
 already used by the editors, and supports the broader WP 7.0 admin visual
 reskin (#64308).
  * '''Performance''': removes a major reason the icon font is loaded on
 every admin page, and lets new icons be added without growing a single
 large font file.

 Note: per feedback on #65089, screen-reader benefits here are modest
 compared to today's approach. The real gains are consistency, performance,
 and reliability.

 == Backward Compatibility ==

  * Low-risk and additive. Only Core's own default icons change; their
 position, labels, and behavior stay the same.
  * The public menu icon API is untouched: plugins and themes can still
 pass a Dashicons class or their own SVG when registering menu items, and
 the Dashicons stylesheet must stay available for them.
  * No change to how the menu is built, to its hooks, or to keyboard
 navigation.

 == Related Tickets / References ==

  * #65089 — parent / umbrella: replace Dashicons with @wordpress/icons
 across wp-admin
  * #64308 — broader WP 7.0 admin visual reskin (the "Admin Frame": sidebar
 + toolbar)
  * #25147 — existing SVG support and recoloring for admin menu icons
 (prior art)
  * #50423 — the "Collapse menu" button icon (in scope here)
  * #50539 — exploration of an icon-less admin menu (distinct: this ticket
 keeps the icons)
  * #47012 — proposal to simplify admin navigation (distinct: structure,
 not icon technique)
  * [https://github.com/WordPress/gutenberg/tree/trunk/packages/icons
 @wordpress/icons package]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/65387>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform