Make WordPress Core

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: lucasmdo's profile lucasmdo 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)

#1 @lucasmdo
2 weeks ago

#65089: parent / umbrella: replace Dashicons with @wordpress/icons across wp-admin

Note: See TracTickets for help on using tickets.