Title: dashicons – Make WordPress Core

---

#  Tag Archives: dashicons

 [  ](https://profiles.wordpress.org/desrosj/) [Jonathan Desrosiers](https://profiles.wordpress.org/desrosj/)
4:07 pm _on_ July 15, 2020     
Tags: [5.5 ( 87 )](https://make.wordpress.org/core/tag/5-5/),
dashicons, [dev-notes ( 648 )](https://make.wordpress.org/core/tag/dev-notes/), 
[UI ( 99 )](https://make.wordpress.org/core/tag/ui/)   

# 󠀁[Dashicons in WordPress 5.5 (the final update)](https://make.wordpress.org/core/2020/07/15/dashicons-in-wordpress-5-5-the-final-update/)󠁿

_Edit 8/12/2020: When initially published, 5 editor icons were missing. These have
been added and all counts have been updated to be accurate. Props [@coffee2code](https://profiles.wordpress.org/coffee2code/)._

Earlier this year, [a post was published](https://make.wordpress.org/design/2020/04/20/next-steps-for-dashicons/)
on the [Make WordPress Design](https://make.wordpress.org/design/) blogblog (versus
network, site) detailing the short road ahead for Dashicons.

> We’ve recently discussed how to best move forward with icons in WordPress. The
> blockBlock Block is the abstract term used to describe units of markup that, composed
> together, form the content or layout of a webpage using the WordPress editor. 
> The idea combines concepts of what in the past may have achieved with shortcodes,
> custom HTML, and embed discovery into a single consistent API and user experience.
> editor uses SVG icons directly, and the rest of WordPress uses the Dahsicons icon
> font. One of the challenges with an icon font is that it’s one big compiled “sprite”,
> and so even though it gets cached well, for every icon you add the sprite grows
> bigger. With SVG you include just the icons you need.
> @joen – [Next steps for Dashicons](https://make.wordpress.org/design/2020/04/20/next-steps-for-dashicons/)

Dashicons were originally brought into CoreCore Core is the set of software required
to run WordPress. The Core Development Team builds WordPress. as part of the MP6
project that redesigned the entire WordPress adminadmin (and super admin) (see [#25858](https://core.trac.wordpress.org/ticket/25858)).
A lot has changed over the last 7+ years and it’s time to explore better, more efficient
ways to manage icons in WordPress Core.

**This update will be the final update to the Dashicons icon font in WordPress Core.**

Don’t worry, the Dashicons font is not going anywhere. It will continue to be bundled
with WordPress in future releases. However, requests to add new icons to the font
will no longer be accepted.

## New icons

In the final Dashicons update being included in the 5.5 release, 71 new icons have
been added. This includes 32 icons that were [merged into the icon font that already existed in the block editor](https://github.com/WordPress/dashicons/pull/402).

**Reminder:** The WOFF 1.0 format (while still included for backwards compatibility)
will not include these new icons. The reasons for this were detailed in the [Dashicons developer note accompanying WordPress 5.2](https://make.wordpress.org/core/2019/04/11/dashicons-in-wordpress-5-2/).

### Block editor

| Icon | CSSCSS Cascading Style Sheets. Class | Code | 
|    |  `dashicons-align-full-width`  |  `f114`  | 
|    |  `dashicons-align-pull-left`  |  `f10a`  | 
|    |  `dashicons-align-pull-right`  |  `f10b`  | 
|    |  `dashicons-align-wide`  |  `f11b`  | 
|    |  `dashicons-block-default`  |  `f12b`  | 
|    |  `dashicons-button`  |  `f11a`  | 
|    |  `dashicons-cloud-saved`  |  `f137`  | 
|    |  `dashicons-cloud-upload`  |  `f13b`  | 
|    |  `dashicons-columns`  |  `f13c`  | 
|    |  `dashicons-cover-image`  |  `f13d`  | 
|    |  `dashicons-ellipsis`  |  `f11c`  | 
|    |  `dashicons-embed-audio`  |  `f13e`  | 
|    |  `dashicons-embed-generic`  |  `f13f`  | 
|    |  `dashicons-embed-photo`  |  `f144`  | 
|    |  `dashicons-embed-post`  |  `f146`  | 
|    |  `dashicons-embed-video`  |  `f149`  | 
|    |  `dashicons-exit`  |  `f14a`  | 
|    |  `dashicons-heading`  |  `f10e`  | 
|    |  `dashicons-html`  |  `f14b`  | 
|    |  `dashicons-info-outline`  |  `f14c`  | 
|    |  `dashicons-insert-after`  |  `f14d`  | 
|    |  `dashicons-insert-before`  |  `f14e`  | 
|    |  `dashicons-insert`  |  `f10f`  | 
|    |  `dashicons-remove`  |  `f14f`  | 
|    |  `dashicons-shortcode`  |  `f150`  | 
|    |  `dashicons-table-col-after`  |  `f151`  | 
|    |  `dashicons-table-col-before`  |  `f152`  | 
|    |  `dashicons-table-col-delete`  |  `f15a`  | 
|    |  `dashicons-table-row-after`  |  `f15b`  | 
|    |  `dashicons-table-row-before`  |  `f15c`  | 
|    |  `dashicons-table-row-delete`  |  `f15d`  | 
|    |  `dashicons-saved`  |  `f15e`  |

### Social

| Icon | CSS Class | Code | 
|    |  `dashicons-amazon`  |  `f162`  | 
|    |  `dashicons-google`  |  `f18b`  | 
|    |  `dashicons-linkedin`  |  `f18d`  | 
|    |  `dashicons-pinterest`  |  `f192`  | 
|    |  `dashicons-podio`  |  `f19c`  | 
|    |  `dashicons-reddit`  |  `f195`  | 
|    |  `dashicons-spotify`  |  `f196`  | 
|    |  `dashicons-twitch`  |  `f199`  | 
|    |  `dashicons-whatsapp`  |  `f19a`  | 
|    |  `dashicons-xing`  |  `f19d`  | 
|    |  `dashicons-youtube`  |  `f19b`  |

### Databases

| Icon | CSS Class | Code | 
|    |  `dashicons-database-add`  |  `f170`  | 
|    |  `dashicons-database-export`  |  `f17a`  | 
|    |  `dashicons-database-import`  |  `f17b`  | 
|    |  `dashicons-database-remove`  |  `f17c`  | 
|    |  `dashicons-database-view`  |  `f17d`  | 
|    |  `dashicons-database`  |  `f17e`  |

### Notifications

| Icon | CSS Class | Code | 
|    |  `dashicons-bell`  |  `f16d`  |

### Transportation

| Icon | CSS Class | Code | 
|    |  `dashicons-airplane`  |  `f15f`  | 
|    |  `dashicons-car`  |  `f16b`  |

### Devices

| Icon | CSS Class | Code | 
|    |  `dashicons-calculator`  |  `f16e`  | 
|    |  `dasicons-games`  |  `f18a`  | 
|    |  `dashicons-printer`  |  `f193`  |

### Food & beverage

| Icon | CSS Class | Code | 
|    |  `dashicons-beer`  |  `f16c`  | 
|    |  `dashicons-coffee`  |  `f16f`  | 
|    |  `dashicons-drumstick`  |  `f17f`  | 
|    |  `dashicons-food`  |  `f187`  |

### Miscellaneous

| Icon | CSS Class | Code | 
|    |  `dashicons-bank`  |  `f16a`  | 
|    |  `dashicons-hourglass`  |  `f18c`  | 
|    |  `dashicons-money-alt`  |  `f18e`  | 
|    |  `dashicons-open-folder`  |  `f18f`  | 
|    |  `dashicons-pdf`  |  `f190`  | 
|    |  `dashicons-pets`  |  `f191`  | 
|    |  `dashicons-privacy`  |  `f194`  | 
|    |  `dashicons-superhero`  |  `f198`  | 
|    |  `dashicons-superhero-alt`  |  `f197`  | 
|    |  `dashicons-edit-page`  |  `f186`  | 
|    |  `dashicons-fullscreen-alt`  |  `f188`  | 
|    |  `dashicons-fullscreen-exit-alt`  |  `f189`  |

Thank you to [anyone and everyone that has contributed to Dashicons](https://github.com/WordPress/dashicons/graphs/contributors)
over the last 7+ years.

---

To see all of the changes to Dashicons since the [last update included in WordPress 5.2](https://make.wordpress.org/core/2019/04/11/dashicons-in-wordpress-5-2/),
check out the [repository on GitHub](https://github.com/WordPress/dashicons/compare/3136c3d0452967c3a0ce43a59a64b9f54c4f5011...master)
or the ticketticket Created for both bug reports and feature development on the 
bug tracker. on TracTrac An open source project by Edgewall Software that serves
as a bug tracker and project management tool for WordPress. ([#49913](https://core.trac.wordpress.org/ticket/49913)).
To get a complete overview of all icons please visit [developer.wordpress.org/resource/dashicons/](https://developer.wordpress.org/resource/dashicons/).

_Props [@empireoflight](https://profiles.wordpress.org/empireoflight/), [@joen](https://profiles.wordpress.org/joen/),
and [@casiepa](https://profiles.wordpress.org/casiepa/) for proofreading._

[#5-5](https://make.wordpress.org/core/tag/5-5/), [#dashicons](https://make.wordpress.org/core/tag/dashicons/),
[#dev-notes](https://make.wordpress.org/core/tag/dev-notes/), [#ui](https://make.wordpress.org/core/tag/ui/)

 [  ](https://profiles.wordpress.org/desrosj/) [Jonathan Desrosiers](https://profiles.wordpress.org/desrosj/)
6:23 pm _on_ April 11, 2019     
Tags: [5.2 ( 37 )](https://make.wordpress.org/core/tag/5-2/),
dashicons, [dev-notes ( 648 )](https://make.wordpress.org/core/tag/dev-notes/), 
[UI ( 99 )](https://make.wordpress.org/core/tag/ui/)   

# 󠀁[Dashicons in WordPress 5.2](https://make.wordpress.org/core/2019/04/11/dashicons-in-wordpress-5-2/)󠁿

It’s been over 3 years since Dashicons has been updated (see [#34221](https://core.trac.wordpress.org/ticket/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](https://github.com/WordPress/dashicons/)
to make adding new icons easier. Now, when SVG files are added for new icons they
are automatically included in the font and CSSCSS Cascading Style Sheets. files.
This change will not be noticeable from the WordPress CoreCore Core is the set of
software required to run WordPress. The Core Development Team builds WordPress. 
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 networknetwork (versus
site, blog) consumption.

WOFF2 is [supported by all modern browsers](https://caniuse.com/#feat=woff2), but
is not supported in Internet Explorer.

## WOFF 1.0 Format

The [WOFF 1.0](https://caniuse.com/#feat=woff) 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](https://caniuse.com/#feat=eot)).
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` * | `f477` | 
|  | `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](https://make.wordpress.org/tide/),
[REST API](https://make.wordpress.org/core/tag/rest-api/), and [Coding Standards](https://wordpress.slack.com/messages/C5VCTJGH3).

| 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](https://github.com/WordPress/dashicons/issues/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](https://profiles.wordpress.org/joen/),
[@empireoflight](https://profiles.wordpress.org/empireoflight/), [@folletto](https://profiles.wordpress.org/folletto/),
[@netweb](https://profiles.wordpress.org/netweb/), [@aduth](https://profiles.wordpress.org/aduth/),
[@dsifford](https://profiles.wordpress.org/dsifford/), [@SergioEstevao](https://profiles.wordpress.org/sergioestevao/),
[@cathibosco1](https://profiles.wordpress.org/cathibosco1/), [@jaymanpandya](https://profiles.wordpress.org/jaymanpandya/),
[@oztaser](https://profiles.wordpress.org/oztaser/), [@ryelle](https://profiles.wordpress.org/ryelle/),
[@joshuawold](https://profiles.wordpress.org/joshuawold/), [@nateallen](https://profiles.wordpress.org/nateallen/),
[@desrosj](https://profiles.wordpress.org/desrosj/), [@bahia0019](https://profiles.wordpress.org/bahia0019/),
and [@liljimmi](https://profiles.wordpress.org/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/](https://developer.wordpress.org/resource/dashicons/).

[#5-2](https://make.wordpress.org/core/tag/5-2/), [#dashicons](https://make.wordpress.org/core/tag/dashicons/),
[#dev-notes](https://make.wordpress.org/core/tag/dev-notes/), [#ui](https://make.wordpress.org/core/tag/ui/)

 [  ](https://profiles.wordpress.org/empireoflight/) [Ben Dunkle](https://profiles.wordpress.org/empireoflight/)
6:39 pm _on_ October 23, 2016     
Tags: dashicons   

# 󠀁[Converting Dashicons to SVG](https://make.wordpress.org/core/2016/10/23/converting-dashicons-to-svg/)󠁿

Currently, WordPress uses a font to render all the icons. The goal is to convert
to SVG. We’ve started the process, but there’s a lot more work to be done to make
sure the SVGs are rendered properly.

Read more about the project’s purpose in a previous post by [@melchoyce](https://profiles.wordpress.org/melchoyce/):

https://make.wordpress.org/core/2015/06/11/moving-dashicons-from-an-icon-font-to-
svg/

Since that post, progress has been made on a new GitHubGitHub GitHub is a website
that offers online implementation of git repositories that can easily be shared,
copied and modified by other developers. Public repositories are free to host, private
repositories require a paid subscription. GitHub introduced the concept of the ‘
pull request’ where code changes done in branches by contributors can be reviewed
and discussed before being merged by the repository owner. [https://github.com/](https://github.com/)
repo at [github.com/ryelle/WordPress/](https://github.com/ryelle/WordPress/) (the
ones listed in the previous post are no longer being used). Issues and [instructions on how to get started](https://github.com/ryelle/WordPress/wiki/Contributing-to-The-Dashicons-SVG-Project)
can be found there.

So far, the font code has been replaced with SVG code wherever possible. For the
most part, the SVGs are displaying properly. [Issues](https://github.com/ryelle/WordPress/issues)
are being posted on the GitHub repo.

### To summarize:

 * There are several places where the SVG is still not showing up. The code used
   to display the font is inconsistent, e.g. in the TinyMCE bar above the visual
   content editor.
 * There are likely many places that haven’t been discovered that need icons. For
   the most part, if you see a square, it’s a missing icon. I’ve gone through and
   noted everywhere that I’ve seen this, but that’s just one person.
 * The CSSCSS Cascading Style Sheets. styling of the SVGs is fundamentally different
   that what’s being used to style the font. We need people to style the SVGs so
   they look and behave the way the font currently does.
 * We need to clean out the old CSS (and HTMLHTML HyperText Markup Language. The
   semantic scripting language primarily used for outputting content in web browsers.)
   code being used to display and style the font.
 * We need to QA test on a variety of devices and browsers.

Get started by joining the [#design-dashicons](https://wordpress.slack.com/messages/design-dashicons/)
channel on SlackSlack Slack is a Collaborative Group Chat Platform [https://slack.com/](https://slack.com/).
The WordPress community has its own Slack Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/).
Meetings are held there every Friday at 7pm UTC. The next one is on [Friday at 19:00 UTC](https://www.timeanddate.com/worldclock/fixedtime.html?iso=20261016T1900).

[#dashicons](https://make.wordpress.org/core/tag/dashicons/)

 [  ](https://profiles.wordpress.org/ryan/) [Ryan Boren](https://profiles.wordpress.org/ryan/)
11:25 pm _on_ July 8, 2015     
Tags: [beta-testing-flow ( 3 )](https://make.wordpress.org/core/tag/beta-testing-flow/),
[customize ( 67 )](https://make.wordpress.org/core/tag/customize/), dashicons, [list-tables ( 3 )](https://make.wordpress.org/core/tag/list-tables/),
[multisite ( 90 )](https://make.wordpress.org/core/tag/multisite/), [passwords ( 3 )](https://make.wordpress.org/core/tag/passwords/),
[today-in-the-nightly ( 3 )](https://make.wordpress.org/core/tag/today-in-the-nightly/),
[toolbar ( 4 )](https://make.wordpress.org/core/tag/toolbar/)   

# 󠀁[Today in the Nightly: Customize in the Toolbar, Passwords UI, List Tables on Phones, Dashicons](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/)󠁿

Development leading up to the first betaBeta A pre-release of software that is given
out to a large group of users to trial under real conditions. Beta versions have
gone through alpha testing in-house and are generally fairly close in look, feel
and function to the final product; however, design changes often occur as part of
the process. brought several visual changes. These are available right now in the
nightly build. [Switch a site to nightly builds](https://make.wordpress.org/core/handbook/beta-testing/)
and try them out.

### Customize in the toolbar

To disambiguate between links to the CustomizerCustomizer Tool built into WordPress
core that hooks into most modern themes. You can use it to preview and modify many
of your site’s appearance settings. and links to the Appearance screens from the
front-end, Customize now has a top-level toolbar button rather than having links
to it mixed with dashboard links in the site menu. This context mixing leads to 
disrupted user expectations as they navigate, as well as experiences that feel slower
or actually are slower in some cases. See [#32924](https://core.trac.wordpress.org/ticket/32924).

This means an additional top-level menu item, but the existing links to Widgets 
and Themes in the dropdown will now point to the adminadmin (and super admin), as
the Dashboard and Menus links do. The advantage and goal for this change is to make
it clear that you are about to enter the customizer. Deep links have not been added
back in this go-round; this means that direct links to HeaderHeader The header of
your site is typically the first thing people will experience. The masthead or header
art located across the top of your page is part of the look and feel of your website.
It can influence a visitor’s opinion about your content and you/ your organization’s
brand. It may also look different on different screen sizes. and Background are 
currently absent (with a very narrow exception related to old browsers). Those two
deep links are still available in the admin menu under Appearance, which similarly
mixes context but has not yet been addressed.

  [](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/customize-in-the-toolbar-dashboard-macnchrome/#main)
Dashboard view, Macnchrome   [](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/customize-in-the-toolbar-front-page-macnchrome/#main)
Front page view, Macnchrome   [](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/customize-in-toolbar-front-page-iphone-6plus/#main)
Front page, iPhone 6+ 
  [](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/customize-in-toolbar-dashboard-iphone-6plus/#main)
Dashboard, iPhone 6+

More changes are coming to the toolbar. Peek at a [possibility](https://make.wordpress.org/flow/2015/06/30/toolbar-survey-with-32678-5-diff-iphone-6/)
for more general improvements to the toolbar, being discussed in [#32678](https://core.trac.wordpress.org/ticket/32678).

### Phone friendly list tables

List tables now scale down to phones. The column truncation strategy they used before
didn’t scale down to small screens. A single column layout with disclosures is the
new strategy. Some of our most important screens use list tables, notably Media 
and Posts. Truncated columns was number 5 on our [top  5 impediments to flow on touch devices list](https://make.wordpress.org/flow/2015/06/13/the-top-5-impediments-to-flow-on-touch-devices/).

After:

  [](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/media-list-table-after-iphone-6plus/#main)
Media   [](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/posts-list-table-after-iphone-6plus/#main)
Posts

Before:

  [](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/media-list-table-before-iphone-6plus/#main)
Media   [](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/posts-list-table-before-iphone-6plus/#main)
Posts

See [#32395](https://core.trac.wordpress.org/ticket/32395).

For more screenshots, see these [visual surveys of the list table screens](https://make.wordpress.org/flow/tag/list-tables/).

### Toolbar interaction fixes for touch devices

I’ve been wanting this one for a long time.  Toolbar interaction was number 3 on
the [top  5 impediments to flow on touch devices](https://make.wordpress.org/flow/2015/06/13/the-top-5-impediments-to-flow-on-touch-devices/).

 

[⌊Fixed!⌉⌊Fixed!⌉[

Fixed!

See [#29906](https://core.trac.wordpress.org/ticket/29906). That ticketticket Created
for both bug reports and feature development on the bug tracker. is a good read.
It has: Visual feedback and visual surveys. Punting a working fix to the next release
so that a new, more future proof approach could be tried. Development of touch capabilitycapability
A **capability** is permission to perform one or more types of task. Checking if
a user has a capability is performed by the `current_user_can` function. Each user
of a WordPress site might have some permissions but not others, depending on their
role. For example, users who have the Author role usually have permission to edit
their own posts (the “edit_posts” capability), but not permission to edit other 
users’ posts (the “edit_others_posts” capability). detection. Working around iOSiOS
The operating system used on iPhones and iPads.. Development of testing checklists.
Lots of iteration.

### Passwords UIUI User interface

The password set/change UI was updated with these improvements.

 * Generate the password for the user
 * More tightly integrate password strength meter
 * Warn on weak passwords

  [](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/image-5/#main)
[](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/image-6/#main)
[](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/image-7/#main)

See [#32589](https://core.trac.wordpress.org/ticket/32589) for more screenshots.

### Dashicons update

Dashicons received a big update.

New icons:

 * .dashicons-admin-customizer (f540)
 * .dashicons-admin-multisitemultisite Used to describe a WordPress installation
   with a network of multiple blogs, grouped by sites. This installation type has
   shared users tables, and creates separate database tables for each blog (wp_posts
   becomes wp_0_posts). See also **network**, **blog**, **site** (f541)
 * .dashicons-editor-table (f535)
 * .dashicons-filterFilter Filters are one of the two types of Hooks [https://codex.wordpress.org/Plugin_API/Hooks](https://codex.wordpress.org/Plugin_API/Hooks).
   They provide a way for functions to modify data of other functions. They are 
   the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated
   manner, and should never have side effects such as affecting global variables
   and output. (f536)
 * .dashicons-hidden (f530)
 * .dashicons-image-filter (f533)
 * .dashicons-image-rotate (f531)
 * .dashicons-layout (f538)
 * .dashicons-sticky (f537)
 * .dashicons-thumbs-down (f542)
 * .dashicons-thumbs-up (f529)
 * .dashicons-unlock (f528)
 * .dashicons-warning (f534)

Updated icons:

 * .dashicons-plus (f132)
 * .dashicons-yes (f147)

[⌊dashicons-preview⌉⌊dashicons-preview⌉[

See [#30902](https://core.trac.wordpress.org/ticket/30902).

### Better styling for .form-invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also _notabug_) that indicates the ticket is not a bug, is a support request, or is generally invalid. inputs

  [](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/add-new-user-with-empty-fields-macnchrome/#main)
Macnchrome   [](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/add-new-user-with-empty-fields-iphone-6/#main)
iPhone 6+   [](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/before/#main)
Before

See [#32490](https://core.trac.wordpress.org/ticket/32490).

### Responsive styling for my-sites.php

My Sites now moves to a single column layout on narrow viewports. Here it is on 
an iPhone 6, an iPad, and a Macbook, as well as at full-width.

  [](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/31685-iphone6/#main)
iPhone 6   [](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/31685-ipad/#main)
iPad   [](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/31685-fullwidth/#main)
full width 
  [](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/31685-macnchrome/#main)
Macnchrome

Here’s what it looked liked before.

[⌊my-sites-before⌉⌊my-sites-before⌉[

See [#31685](https://core.trac.wordpress.org/ticket/31685) – Better responsive styling
for my-sites.php

### Crosslinking Customizer Panels

The graf in the Menus panel details about using the Customize Menu widgetWidget 
A WordPress Widget is a small block that performs a specific function. You can add
these widgets in sidebars also known as widget-ready areas on your web page. WordPress
widgets were originally created to provide a simple and easy-to-use way of giving
design and structure control of the WordPress theme to the user. now links directly
to the widgets panel.

[⌊customize menus details⌉⌊customize menus details⌉[

See [#32742](https://core.trac.wordpress.org/ticket/32742).

You might notice the misaligned question mark icon on that screenshot. [#32733](https://core.trac.wordpress.org/ticket/32733)
is tracking that.

###  Easy switching between production and nightly builds

The beta tester pluginPlugin A plugin is a piece of software containing a group 
of functions that can be added to a WordPress website. They can extend functionality
or add new features to your WordPress websites. WordPress plugins are written in
the PHP programming language and integrate seamlessly with WordPress. These can 
be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/)
or can be cost-based plugin from a third-party. makes it easy to switch a site to
nightly builds. Now switching back to the latest stable build is just as easy. It’s
not the prettiest, but it is shown only to beta testers and will suffice until we
finally refresh the Grand Unified Updater screen. For info on using the beta tester
plugin to test with nightly builds, see the [Beta Testing page](https://make.wordpress.org/core/handbook/beta-testing/)
of the coreCore Core is the set of software required to run WordPress. The Core 
Development Team builds WordPress. handbook.

  [](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/screen-shot-2015-07-08-at-5-38-00-pm/#main)
Macnchrome   [](https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/image-8/#main)
iPhone 6+

See [#32613](https://core.trac.wordpress.org/ticket/32613).

 

Previously: [Today in the Nightly: Site Icons, Text Editor in Press This](https://make.wordpress.org/core/2015/06/30/today-in-the-nightly-site-icons-text-editor-in-press-this/)

[#beta-testing-flow](https://make.wordpress.org/core/tag/beta-testing-flow/), [#customize](https://make.wordpress.org/core/tag/customize/),
[#dashicons](https://make.wordpress.org/core/tag/dashicons/), [#list-tables](https://make.wordpress.org/core/tag/list-tables/),
[#multisite](https://make.wordpress.org/core/tag/multisite/), [#passwords](https://make.wordpress.org/core/tag/passwords/),
[#today-in-the-nightly](https://make.wordpress.org/core/tag/today-in-the-nightly/),
[#toolbar](https://make.wordpress.org/core/tag/toolbar/)

 [  ](https://profiles.wordpress.org/melchoyce/) [Mel Choyce-Dwan](https://profiles.wordpress.org/melchoyce/)
7:01 pm _on_ June 11, 2015     
Tags: dashicons, [roadmaps ( 17 )](https://make.wordpress.org/core/tag/roadmaps/)

# 󠀁[Moving Dashicons from an Icon Font to SVG](https://make.wordpress.org/core/2015/06/11/moving-dashicons-from-an-icon-font-to-svg/)󠁿

In the next couple months, we’re going to focus on converting the Dashicons icon
font in coreCore Core is the set of software required to run WordPress. The Core
Development Team builds WordPress. to SVG. The process of adding and updating the
Dashicons font is an incredibly labor intensive, tedious process that is currently
limited to a small number of people who have the ability to add new characters to
the .glyphs source file. By moving to SVG, we’re not only making the process easier
for Dashicons maintainers, but also making the process of adding and updating icons
easier and more open to the entire design community.

### Why SVG?

When we initially built Dashicons, we tried out a couple different methods for including
them in the adminadmin (and super admin). SVG was our preferred method, but due 
to lack of support and fallbacks for SVG at the time, we opted to go for the more
widely support icon font method.

However, there have tremendous strides to improve support and understanding around
SVG in the past year and a half, and we think now is a good time to start the transition
process in core.

Here are some of the benefits SVG icons provide:

 * The icons are straight up vector — that means no font antialiasing issues when
   you use the icons outside of their 20×20 pixel grid, making the icons much more
   versatile
 * Better CSSCSS Cascading Style Sheets. control — switching to SVG introduces the
   possibility of multi-color icons
 * Better positioning control than icon fonts
 * SVG won’t fail to load like a font might, because inline SVGs are included right
   there in the document
 * Potentially better for accessibilityAccessibility Accessibility (commonly shortened
   to a11y) refers to the design of products, devices, services, or environments
   for people with disabilities. The concept of accessible design ensures both “
   direct access” (i.e. unassisted) and “indirect access” meaning compatibility 
   with a person’s assistive technology (for example, computer screen readers). (
   https://en.wikipedia.org/wiki/Accessibility) [[source](http://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/)]
 * Much easier to maintain than the current icon font
 * Easier for pluginPlugin A plugin is a piece of software containing a group of
   functions that can be added to a WordPress website. They can extend functionality
   or add new features to your WordPress websites. WordPress plugins are written
   in the PHP programming language and integrate seamlessly with WordPress. These
   can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/)
   or can be cost-based plugin from a third-party. and theme authors to add custom
   SVGs

The cons:

 * Less native browser support (but fallback options exist)
 * Figuring out backwards compatibility in core will be challenging (but not insurmountable)

[Chris Coyier has a pretty fantastic rundown on SVG vs. icon fonts](https://css-tricks.com/icon-fonts-vs-svg/).

Just to note: we’re **not** talking about supporting uploading SVGs in the media
library. These would be SVGs built by us, included inline in the WordPress dashboard.

### The Roadmap

Here’s the plan:

 * As much as possible, we’re going to attempt to build this as a feature pluginFeature
   Plugin A plugin that was created with the intention of eventually being proposed
   for inclusion in WordPress Core. See [Features as Plugins](https://make.wordpress.org/core/handbook/about/release-cycle/features-as-plugins/)—
   but we’ve already started running into some issues with what we can and can’t
   do in a plugin.
 * The MVPMinimum Viable Product "A minimum viable product (MVP) is a product with
   just enough features to satisfy early customers, and to provide feedback for 
   future product development." - [WikiPedia](https://en.wikipedia.org/wiki/Minimum_viable_product)
   will be svg icons being generated into a sprite through a Grunt build process.
   For the MVP, we’re not going to focus on browser support.
 * Once we have an MVP up, we’re going to explore the best way to provide browser
   support [using techniques outlined by Chris Coyier in Github](https://github.com/ryelle/WP-Dashboard-SVG/issues/1#issuecomment-78568637),
   as well as figure our backwards compatibility with the icon font.
 * Finally, we’re going to explore breaking up SVGs into different icon “packs” (
   TinyMCE, admin bar, CPT, etc.) and figure out if we can enqueue them on the fly.

Ideally, we’d like to do as much of this during the 4.3 cycle as possible, with 
the idea of merging in 4.4. This means we’ll need to have a _solid_ MVP by August,
which is feasible if we can get more help. That’s why we’d like you to…

### Join us

We would love to get more people involved in this project. Specifically, we’re looking
for people to help build out the MVP, and people to work on compatibility issues.

We’re going to be building out the plugin on githubGitHub GitHub is a website that
offers online implementation of git repositories that can easily be shared, copied
and modified by other developers. Public repositories are free to host, private 
repositories require a paid subscription. GitHub introduced the concept of the ‘
pull request’ where code changes done in branches by contributors can be reviewed
and discussed before being merged by the repository owner. [https://github.com/](https://github.com/):
[https://github.com/ryelle/svg-dashicons-plugin](https://github.com/ryelle/svg-dashicons-plugin).
There’s nothing there yet, but we hope to get some early work up soon. (We also 
did some very early explorations in [another repo](https://github.com/ryelle/WP-Dashboard-SVG/),
if you want to see some of the past conversations and issues.)

Our meetings take place in #design-dashicons every Thursday at 18:30 UTC. Please
join in and help us make Dashicons even better.

If you have questions, feel free to leave a comment here or ask in slackSlack Slack
is a Collaborative Group Chat Platform [https://slack.com/](https://slack.com/).
The WordPress community has its own Slack Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/).

[#dashicons](https://make.wordpress.org/core/tag/dashicons/), [#roadmaps](https://make.wordpress.org/core/tag/roadmaps/)

 [  ](https://profiles.wordpress.org/ocean90/) [Dominik Schilling](https://profiles.wordpress.org/ocean90/)
3:31 pm _on_ December 20, 2014     
Tags: [4.1 ( 40 )](https://make.wordpress.org/core/tag/4-1/),
dashicons, [dev-notes ( 648 )](https://make.wordpress.org/core/tag/dev-notes/), 
[UI ( 99 )](https://make.wordpress.org/core/tag/ui/)   

# 󠀁[Dashicons in WordPress 4.1](https://make.wordpress.org/core/2014/12/20/dashicons-in-wordpress-4-1/)󠁿

WordPress 4.1 includes **20 new fresh and clean icons**. Thanks to [@liljimmi](https://profiles.wordpress.org/liljimmi/),
[@melchoyce](https://profiles.wordpress.org/melchoyce/) and [@empireoflight](https://profiles.wordpress.org/empireoflight/).

### Media Icons

  |  Icon |  CSSCSS Cascading Style Sheets. Class |  Code |  
   |     |   `dashicons-controls-play`  |   `f522`  |  
 |     |   `dashicons-controls-pause`  |   `f523`  |  
 |     |   `dashicons-controls-forward`  |   `f519`  |  
 |     |   `dashicons-controls-skipforward`  |   `f517`  |  
 |     |   `dashicons-controls-back`  |   `f518`  |  
 |     |   `dashicons-controls-skipback`  |   `f516`  |  
 |     |   `dashicons-controls-repeat`  |   `f515`  |  
 |     |   `dashicons-controls-volumeon`  |   `f521`  |  
 |     |   `dashicons-controls-volumeoff`  |   `f520`  |

### Posts Screen (updated)

  |  Icon |  CSS Class |  Code |  
   |     |   `dashicons-align-left`  |   `f135`  |  
 |     |   `dashicons-align-right`  |   `f136`  |  
 |     |   `dashicons-align-center`  |   `f134`  |  
 |     |   `dashicons-align-none`  |   `f138`  |

### Misc

  |  Icon |  CSS Class |  Code |  
   |     |   `dashicons-phone`  |   `f525`  |  
 |     |   `dashicons-building`  |   `f512`  |  
 |     |   `dashicons-store`  |   `f513`  |  
 |     |   `dashicons-album`  |   `f514`  |  
 |     |   `dashicons-palmtree`  |   `f527`  |  
 |     |   `dashicons-tickets-alt`  |   `f524`  |  
 |     |   `dashicons-money`  |   `f526`  |

To get a complete overview of all icons please visit [developer.wordpress.org/resource/dashicons/](https://developer.wordpress.org/resource/dashicons/).

[#4-1](https://make.wordpress.org/core/tag/4-1/), [#dashicons](https://make.wordpress.org/core/tag/dashicons/),
[#dev-notes](https://make.wordpress.org/core/tag/dev-notes/), [#ui](https://make.wordpress.org/core/tag/ui/)

 [  ](https://profiles.wordpress.org/ocean90/) [Dominik Schilling](https://profiles.wordpress.org/ocean90/)
2:17 pm _on_ April 16, 2014     
Tags: [3.9 ( 33 )](https://make.wordpress.org/core/tag/3-9/),
dashicons, [dev-notes ( 648 )](https://make.wordpress.org/core/tag/dev-notes/), 
[UI ( 99 )](https://make.wordpress.org/core/tag/ui/)   

# 󠀁[Dashicons in WordPress 3.9](https://make.wordpress.org/core/2014/04/16/dashicons-in-wordpress-3-9/)󠁿

WordPress 3.8 has introduced an icon font for the WordPress adminadmin (and super
admin), named Dashicons. Dashicons includes 167 icons until now.
 WordPress 3.9 
includes **30 new fresh and clean icons**. Thanks to all contributors to ticketticket
Created for both bug reports and feature development on the bug tracker. [#26936](https://core.trac.wordpress.org/ticket/26936),
especially [@melchoyce](https://profiles.wordpress.org/melchoyce/) and [@empireoflight](https://profiles.wordpress.org/empireoflight/).

### Media Icons

All media file type icons got a huge facelift, see [#26936](https://core.trac.wordpress.org/ticket/26936).
There are also two new icons for the [playlists feature](https://make.wordpress.org/core/tag/media/).

  |  Icon |  CSSCSS Cascading Style Sheets. Class |  Code |  
   |     |   `dashicons-media-archive`  |   `f501`  |  
 |     |   `dashicons-media-audio`  |   `f500`  |  
 |     |   `dashicons-media-code`  |   `f499`  |  
 |     |   `dashicons-media-default`  |   `f498`  |  
 |     |   `dashicons-media-document`  |   `f497`  |  
 |     |   `dashicons-media-interactive`  |   `f496`  |  
 |     |   `dashicons-media-spreadsheet`  |   `f495`  |  
 |     |   `dashicons-media-text`  |   `f491`  |  
 |     |   `dashicons-media-video`  |   `f490`  |  
 |     |   `dashicons-playlist-audio`  |   `f492`  |  
 |     |   `dashicons-playlist-video`  |   `f493`  |

### TinyMCE/Editor

With the update to [TinyMCE 4.0](https://make.wordpress.org/core/2014/01/18/tinymce-4-0-is-in-core/)
you can now use four new icons for editor related UIUI User interface.

  |  Icon |  CSS Class |  Code |  
   |     |   `dashicons-editor-contract`  |   `f506`  |  
 |     |   `dashicons-editor-break`  |   `f464`  |  
 |     |   `dashicons-editor-code`  |   `f475`  |  
 |     |   `dashicons-editor-paragraph`  |   `f476`  |

### Sorting

Use `dashicons-external` for external uses or randomize a list with `dashicons-randomize`.

  |  Icon |  CSS Class |  Code |  
   |     |   `dashicons-external`  |   `f504`  |  
 |     |   `dashicons-randomize`  |   `f503`  |

###  WPorg specific: Jobs, Profiles, WordCamps

We all  WordCamps.

  |  Icon |  CSS Class |  Code |  
   |     |   `dashicons-universal-access`  |   `f483`  |  
 |     |   `dashicons-universal-access-alt`  |   `f507`  |  
 |     |   `dashicons-tickets`  |   `f486`  |  
 |     |   `dashicons-nametag`  |   `f484`  |  
 |     |   `dashicons-clipboard`  |   `f481`  |  
 |     |   `dashicons-heart`  |   `f487`  |  
 |     |   `dashicons-megaphone`  |   `f488`  |  
 |     |   `dashicons-schedule`  |   `f489`  |

### Widgets

Have you already tried the live widgetWidget A WordPress Widget is a small block
that performs a specific function. You can add these widgets in sidebars also known
as widget-ready areas on your web page. WordPress widgets were originally created
to provide a simple and easy-to-use way of giving design and structure control of
the WordPress theme to the user. previews? You should. The following icons are created
for this feature.

  |  Icon |  CSS Class |  Code |  
   |     |   `dashicons-archive`  |   `f478`  |  
 |     |   `dashicons-tagcloud`  |   `f479`  |  
 |     |   `dashicons-text`  |   `f480`  |

### Alerts/Notifications/Flags

The minus icon has an alternative icon, plus now too. Welcome.

  |  Icon |  CSS Class |  Code |  
   |     |   `dashicons-plus-alt`  |   `f502`  |

### Misc/CPT

End of .

  |  Icon |  CSS Class |  Code |  
   |     |   `dashicons-microphone`  |   `f482`  |

To get a complete overview of all icons please visit [http://melchoyce.github.io/dashicons/](http://melchoyce.github.io/dashicons/).

[#3-9](https://make.wordpress.org/core/tag/3-9/), [#dashicons](https://make.wordpress.org/core/tag/dashicons/),
[#dev-notes](https://make.wordpress.org/core/tag/dev-notes/), [#ui](https://make.wordpress.org/core/tag/ui/)