[wp-trac] [WordPress Trac] #65089: Administration: Replace Dashicons icon font with @wordpress/icons SVG components in wp-admin

[WordPress Trac]

#65089: Administration: Replace Dashicons icon font with @wordpress/icons SVG
components in wp-admin
-------------------------------------+-------------------------------------
 Reporter:  lucasmdo                 |      Owner:  (none)
     Type:  enhancement              |     Status:  new
 Priority:  normal                   |  Milestone:  Awaiting Review
Component:  Administration           |    Version:
 Severity:  normal                   |   Keywords:  needs-patch needs-
  Focuses:  ui, accessibility,       |  design needs-design-feedback
  javascript, css, administration,   |
  performance                        |
-------------------------------------+-------------------------------------
 == 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 [https://make.wordpress.org/design/2020/04/20/next-steps-for-
 dashicons/ Make/Design blog post] (April 2020) confirmed Dashicons was
 closed to new requests and that future efforts would focus on the new Icon
 component.
  * [ticket: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."
  * [ticket: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 ==

  * [ticket:49913] — Final Dashicons update (WordPress 5.5)
  * [ticket:47498] — Checkbox/radio SVG migration, discusses removing font
 icons from Core
  * [ticket:41074] — Dashicons 4.9–5.2, discusses SVG direction for the
 admin
  * [https://make.wordpress.org/design/2020/04/20/next-steps-for-dashicons/
 Next steps for Dashicons] — Make/Design official post
  * [https://make.wordpress.org/core/2020/07/15/dashicons-in-wordpress-5-5
 -the-final-update/ Dashicons in WordPress 5.5: The Final Update] — Dev
 note
  * [https://github.com/WordPress/gutenberg/tree/trunk/packages/icons
 @wordpress/icons package on GitHub]

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