Dashicons in WordPress 5.2

It’s been over 3 years since Dashicons has been updated (see #34221 from version 4.5). But, they have not been forgotten about! In 5.2, the Dashicons will see several changes, including 13 awesome new icons.

New Build Process

A new build process has been implemented in the Dashicons GitHub repository to make adding new icons easier. Now, when SVG files are added for new icons they are automatically included in the font and CSS files. This change will not be noticeable from the WordPress Core code base, but it’s worth noting.

New Font File Format: WOFF 2.0

This release will see the introduction of a new font file format, WOFF2 (Web Open Font Format 2). WOFF2 is a more modern replacement for the original WOFF 1.0 format that uses an improved compression, which results in lower network consumption.

WOFF2 is supported by all modern browsers, but is not supported in Internet Explorer.

WOFF 1.0 Format

The WOFF 1.0 file will remain in WordPress Core to ensure backwards compatibility for plugins and themes loading the wp-includes/fonts/dashicons.woff file directly. This file has not been updated to include the new icons below. The new build process currently only allows one WOFF format file to be built. Since WOFF2 is more modern, that is the file format being built moving forward.

However, WOFF 1.0 is compiled and included as an embedded font directly in the dashicons.css file. The embedded WOFF format has been updated to include the new icons. If you wish to use the new Dashicons and require the WOFF 1.0 format for IE support, it is recommended that you use the dashicons.css file included in core to define the Dashicons font face.

Alternatively, you can use the Embedded OpenType format file at wp-includes/fonts/dashicons.eot (supported by all versions of IE). This file does include the new icons.

New Icons

In 5.2, 13 completely new icons were added. However, 18 additional icons that were previously included in the font files but did not have a corresponding CSS declaration are now available. These icons are marked with an asterisk (*) below.

Buddicons

The Buddicons were all previously included in the icon font, but each is now accompanied by new a dashicons-buddicons-* class.

Icon CSS Class Code
dashicons-buddicons-activity * f452
dashicons-buddicons-bbpress-logo * f12b
dashicons-buddicons-buddypress-logo * f448
dashicons-buddicons-community * f453
dashicons-buddicons-forums * f449
dashicons-buddicons-friends * f454
dashicons-buddicons-groups * f456
dashicons-buddicons-pm * f457
dashicons-buddicons-replies * f451
dashicons-buddicons-topics * f450
dashicons-buddicons-tracking * f455

Editor

Icon CSS Class Code
dashicons-editor-ol-rtl f12c
dashicons-editor-ltr f10c

Core Teams

Three new icons have been introduced for some newer teams: Tide, REST API, and Coding Standards.

Icon CSS Class Code
dashicons-tide f10d
dashicons-rest-api f124
dashicons-code-standards f13a

Sites

With the introduction of 3 new icons in 5.2, there are now 4 total site icons. No matter where you are located in the world, there is now an icon for you! (GH-95)

Icon CSS Class Code
dashicons-admin-site-alt f11d
dashicons-admin-site-alt2 f11e
dashicons-admin-site-alt3 f11f

Menus

Icon CSS Class Code
dashicons-menu-alt * f228
dashicons-menu-alt2 * f329
dashicons-menu-alt3 * f349

Social

Icon CSS Class Code
dashicons-instagram f12d

Miscellaneous

Icon CSS Class Code
dashicons-businesswoman f12f
dashicons-businessperson f12e
dashicons-email-alt2 f467
dashicons-yes-alt f12a
dashicons-camera-alt * f129
dashicons-plugins-checked * f485
dashicons-update-alt * f113
dashicons-text-page * f121

A very special thanks goes out to @joen, @empireoflight, @folletto, @netweb, @aduth, @dsifford, @SergioEstevao, @cathibosco1, @jaymanpandya, @oztaser, @ryelle, @joshuawold, @nateallen, @desrosj, @bahia0019, and @liljimmi for their contributions to Dashicons since the last update!

To get a complete overview of all icons please visit developer.wordpress.org/resource/dashicons/.

#5-2, #dashicons, #dev-notes, #ui