[wp-trac] [WordPress Trac] #65386: Toolbar: Replace Dashicons icon font with @wordpress/icons SVGs in the admin bar

[WordPress Trac]

#65386: Toolbar: Replace Dashicons icon font with @wordpress/icons SVGs in the
admin bar
-------------------------------------------------+-------------------------
 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 Toolbar (admin bar) draws its default icons using the Dashicons icon
 font. This is the same legacy approach described in the parent ticket
 #65089, seen here specifically in the Toolbar.


 == Proposed Enhancement ==

 Replace the Dashicons font icons on Core's '''default''' Toolbar 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.

 '''In scope''' — Core's own default Toolbar icons.

 '''Out of scope''':

  * Site-name / home icon → handled by #65088 (replaced with the site
 icon).
  * The "+ New" and Comments items → handled by #65092 (being changed to
 plain text labels, not icons).
  * Icons added by plugins or themes → see Backward Compatibility.

 == Rationale ==

  * '''Performance''': The entire icon font (~300+ glyphs) is loaded,
 regardless of how many icons a page actually uses. This adds unnecessary
 weight to every admin page load.
  * '''Consistency''': brings the Toolbar in line with the icon set already
 used by the editors, and lets new icons be added without growing a single
 large font file.
  * This is a focused, self-contained piece of the direction set in #65089
 and the 2020 Make/Design decision to move Core to SVG icons.

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

 == Backward Compatibility ==

  * Low-risk and additive. Only Core's own default icons change; their
 position, labels, and behavior stay the same.
  * The Dashicons stylesheet must stay available, because many plugins and
 themes still use it for their own Toolbar items. This ticket does not
 remove or retire the font — it only stops Core's default items from
 depending on it.
  * No change to how plugins add or modify Toolbar items, and no change to
 keyboard navigation.

 == Related Tickets / References ==

  * #65089 — parent / umbrella: replace Dashicons with @wordpress/icons
 across wp-admin
  * #65088 — Toolbar: site-name home icon → site icon (carved out here)
  * #65092 — Toolbar: "+ New" and Comments icons → plain text labels
 (carved out here)
  * #57156 — Icons missing in iOS Lockdown Mode (motivating case)
  * #37513 — hiding Toolbar icons from assistive tech (accessibility
 precedent)
  * #65140 — Toolbar: icon color incorrect in mobile layout (related)
  * [https://github.com/WordPress/gutenberg/tree/trunk/packages/icons
 @wordpress/icons package]

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