Want to get involved? See the handbook and optionally drop into #design to chat. Most active design work happens in the block editor project, consider dropping into Needs design or Needs design feedback.
There’s a WordPress Component Library in Figma. Duplicate to edit, direct access is reserved for the design team.
First, a little history–the first icon set used in WordPress was a png/bitmap sprite. The sprite couldn’t scale, which became a problem as 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.
Icon fonts are now an outdated format. SVG icons present a number of advantages in terms of performance, 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), scalability, and ease of use. There have been attempts to convert Dashicons to SVG, but that hasn’t happened yet.
Modifying Dashicons requires using third-party tools and command-line processes, making the contribution process hostile 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 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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 icons they need.
Instead of building something new from scratch or converting the icon font, we can leverage work already done in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ to bring a more modern toolset for admin icons to the whole of WordPress. Gutenberg introduces an SVG icon system that includes a process for extending icon sets. This makes it 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/ or can be cost-based plugin from a third-party 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 sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. 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 design team needs your input. Right now, we’re trying to determine if this is the right direction, and then we’ll focus on implementation details. Let us know what you think!
