Opened 2 weeks ago
Last modified 6 days ago
#65386 new enhancement
Toolbar: Replace Dashicons icon font with @wordpress/icons SVGs in the admin bar
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | Awaiting Review | Priority: | normal |
| Severity: | normal | Version: | |
| Component: | Administration | Keywords: | needs-patch |
| Focuses: | ui, accessibility, css, rtl, administration, performance | Cc: |
Description
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)
- @wordpress/icons package
Change History (2)
Note: See
TracTickets for help on using
tickets.
#65089: parent / umbrella: replace Dashicons with @wordpress/icons across wp-admin