Make WordPress Core

Opened 4 weeks ago

#65089 new enhancement

Administration: Replace Dashicons icon font with @wordpress/icons SVG components in wp-admin

Reported by: lucasmdo's profile lucasmdo Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords: needs-patch needs-design needs-design-feedback
Focuses: ui, accessibility, javascript, css, administration, performance Cc:

Description

Problem / Current Behavior

The WordPress admin area (wp-admin) still relies on Dashicons, an icon font introduced in WordPress 3.8 (released December 12, 2013 — over 12 years ago). While Dashicons served WordPress well, the icon font approach has significant limitations:

  • Inconsistency: The block editor and Site Editor already use @wordpress/icons (SVG-based React components), while the rest of wp-admin uses the legacy Dashicons font. This creates a visual and technical split within the same application.
  • 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.
  • Accessibility:
    • Screen readers: Icons may be read as nonsense or ignored entirely, confusing users who rely on assistive technology.
    • Font overrides: Users who change fonts for readability can break all icons, turning them into empty squares.
    • Copy-paste: Copying text that includes icons produces random, meaningless characters.
    • High-contrast mode: Icons can vanish when users enable high-contrast or forced-colors settings in their OS.
    • No built-in meaning: Icon fonts are just styled characters with no inherent description — accessibility has to be added manually.5.5. No new icons can be added.

Proposed Enhancement

Replace Dashicons icon font usage in wp-admin with @wordpress/icons SVG components (or inline SVGs derived from the same library). This would:

  1. Unify the icon system across all of WordPress, block editor, Site Editor, and classic admin screens would all use the same modern icon library.
  2. Enable tree-shaking so that only the icons actually used on a given page are loaded.
  3. Improve accessibility: inline SVGs support aria-label for example.
  4. Allow new icons to be added as needed without growing a monolithic font file.

Rationale

This is not a new idea, it has been the stated direction of the WordPress project since 2020:

  • The Make/Design blog post (April 2020) confirmed Dashicons was closed to new requests and that future efforts would focus on the new Icon component.
  • 49913 explicitly states: "This update is the final planned update of the Dashicons font. Moving forward, the more modern approach of using SVG icons directly (as the block editor currently does) will be explored."
  • 47498 comments reference "a long standing plan to remove all font icons from core in favor of SVGs."

Six years have passed since this direction was set, and no formal ticket tracks the actual migration work. This ticket aims to formalize the effort and track progress.

Backward Compatibility

This is a critical consideration. Many plugins and themes use dashicons-* CSS classes for admin menus, meta boxes, and custom UI. A migration plan should:

  • Maintain the dashicons stylesheet as a deprecated fallback for a defined transition period (multiple major releases).
  • Provide a compatibility layer so that existing dashicons-* class references continue to render correctly, perhaps by mapping them to their SVG equivalents.
  • Document the migration path for plugin and theme developers with clear timelines.

Related Tickets / References

Change History (0)

Note: See TracTickets for help on using tickets.