WordPress Dashicons Project to wind-up in favour of New Icon Component

The ‘Dashicons’ is the official icon font of the WordPress that was first shipped with the WordPress 3.8. The Dashicons project has supplied many of the icons in WordPress and it’s become widely used by plugins. However, currently, the project is no longer accepting any icon requests.

The block editor had earlier implemented a new process to add icons easily in the repository. The SVG files were automatically included in the font and CSS files for every SVG file added for new icons. The WordPress design contributors recently reviewed the efforts going into the Dashicons project and decided to wrap up the existing tickets for new icons. They are planning for a final release and later work on the development of new icons.

One of the challenges with the icon font was that it used to be a large compiled “sprite”, and so even though it got cached well, the sprite grew bigger for every icon added. With SVG you include just the icons you need. The block editor does this using a new Icon component.

Moreover, the project has been subject to very late and infrequent updates. The WordPress 4.1 included more than 20 new Dashicons made explicitly for inline image editing tools and the built-in media player. There were also a few miscellaneous icons including, a building, a palm tree, tickets, and money.

Since the launch of version 4.5, the Dashicons had gone dormant for three years and it took almost three years to update to version 5.2. So developers who needed a specific icon either waited too long or probably opted to use a different library to get it added. This version 4.5 updated the icon font to use WOFF2 (Web Open Font Format 2) and around 13 awesome new icons were included. Moreover, 18 additional icons that were previously included in the font files but did not have a corresponding CSS declaration were made available in version 5.2. The additions included a range of categories, including Buddicons, Core Teams, Sites, Menus, Social, and Miscellaneous.

For many years, the Dashicons project has supplied many of the icons in WordPress and it’s become widely used by plugins. The Dashicons currently hold an impressive collection of 303 icons! As per the discussion in the core design, it was decided to bring the project’s collection to 340 by complying with the existing requests and close down to new requests.

Dashicons will be maintained in core indefinitely but no new icons will be added after this point. Plugin developers have the option to continue using the icon font or embrace the new ‘Icon’ component.

Moreover, during the discussions regarding the further development steps in Dashicons by the design team, Asmussen noted that the new Icon component comes with a set of icons but developers can also feed it a custom SVG. So, it can be expected that the new Icon component would not be subject to the same limitations.

It was remarked by Asmussen that “An icon doesn’t have to be part of the set for it to be treated like any other icons in the system,” “Which makes it easier to say no to some social icons — we can say ‘No, but you can do this {code example}.’” So the process was made more flexible and saved much time of the developers.

Whats’s coming up

Currently, the Dashicons icon font has been updated to include a number of new icons. While you can download this updated version directly from Github, it is not yet part of WordPress, so the resource the page is currently accurate as to what ships with WordPress.

One of the next steps involves creating a trac ticket to land the updated version to WordPress 5.5.

As per the latest updates:

· Dashicons would not go away from WordPress. It will remain bundled.

· Dashicons is in part because wp-admin itself uses it, and in part exactly because numerous themes and plugins use it.

· In fact, one of the reasons for creating this ultimate version of
Dashicons that adds 36 new icons is to ensure the set is in a good place for themes and plugins.

A Brief Summary on Dashicons and its future

The first icon set used in WordPress was a png/bitmap sprite but the sprite couldn’t scale. That was a big problem as the display resolution increased. To solve the scaling issue, WordPress version 3.8 introduced a vector-based icon set packaged in an icon font, which was the most common approach for the time. Later there were attempts began to convert the Dashicons to SVG.

The icon fonts are quite an updated format and the SVG icons present a number of advantages in terms of performance, accessibility, scalability, and ease of use. Third-party tools and command-line processes would be needed to modify the Dashicons and this would make the contribution process unreceptive to new contributors. 

Adding a new icon and updating the font requires several time-consuming and complicated steps. The desire to keep Dashicons as lean as possible for the sake of performance means any new icons must be considered by the core teams to determine if they are warranted. As a result, there are often requests for new icons that don’t get met, meaning that people aren’t able to access the icons they need.

In order to bring a more modern toolset for admin icons to the whole of WordPress, it is proposed that developers can leverage work already done in Gutenberg instead of building something new or converting the icon font. 

The Gutenberg introduces an SVG icon system that includes a process for extending icon sets. This makes it easier for plugin and theme developers to incorporate any icons they’d like and allows for the tried and true Dashicons to remain part of WordPress’ future.

The design team would like to extend Gutenberg’s icon system to the rest of WordPress. An open-source and actively maintained icon set such as material icons would serve as a base set. This will give us an established set of icons to work with right away, which can then be built on to accommodate WordPress admin, plugins, and themes. This will make it easier for everyone to access the icons they need while bringing a consistent experience across the entirety of WordPress. The proposed design currently needs input and much is on the way.