Dashicons Style Guide-Work in progress!

The Design Team provides design for the WordPress project.

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.

Figma Access

You don’t need edit access to use the Figma libraries, you can copy components from there into your own drafts. If you’re a contributor with the ability to grant edit access, please be mindful, and downgrade to view access once the initial need for edit has waned.

Description

Dashicons are the icons used throughout the WordPress admin. There are several reasons why you might want to design Dashicons. Maybe you’re an icon designer, and want to contribute to WordPress. Or you want to design a custom icon for a 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. If you want do make Dashicons, following these guidelines will help ensure that they look and function great.

Objectives

Make an icon that is consistent with Dashicons’ look and feel.
Save the icon at the proper resolution, size, and file format.
Submit the icon for review to the WordPress community.

Hands-on Walkthrough

Use a Vector Graphics Editor to create your icon. Popular editors include Adobe Illustrator, Sketch, Corel Draw, and Inkscape.
Work in a 20×20 pixel document.
Draw the icon within a 20×20 pixel grid. Strive to snap vertical/horizontal edges to the pixel grid.
Keep it simple. Consider extraneous details within the icon. Are they really necessary?
Keep it universal. Are your own demographics influencing the symbol you’ve chosen for the icon?
Keep it consistent. Examine your icon in context. How would it look in the wp-admin environment?
Save your icon in SVG format.
Submit your icon to [somewhere, tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/.?] for review.

Video demos:

A dashicon in 5 minutes:

A more in-depth demo:

The general “style”

While the icons should be as clear as possible, Dashicons are also friendly and reassuring. Slightly rounded edges are encouraged over sharp, 90º angles. Try a squircle. When given the choice, angle them to the right; e.g., the “Tools” icon starts off on the lower-left and angles to the upper-right of the canvas.

Mel Choyce 6:45 pm on January 22, 2015
Some specific style guidelines:
- Lines should be 2px wide (ex: https://cloudup.com/cYgij8rwfXS)
- Corner radius should measure 1pt/px (ex: https://cloudup.com/c4Hh9J3lbbz)
Ansel Taft 10:11 pm on January 22, 2015

Is a 1px gutter around the icon suggested, based on the style guide?

Cheers
Ben Dunkle 10:42 pm on January 22, 2015

A 1 or 2 pixel gutter is recommended, but in the case of complex icons, they can extend to the edge. See https://cloudup.com/clC3w3ypJNT . In admin bar,the media icon needs a few extra pixels, but the comments icon would look too big if it filled the 20×20 pixel grid.
To get a better idea of whether the icon is the right size, take a screenshot of the context where the icon will be seen, and paste the icon design on a layer above the screenshot.
Tracy Levesque 1:53 am on January 26, 2015

A general description of the look and style of Dashicons.

I would love a quintessential “perfect” Dashicon, or 3, enlarged with all the elements that made it a good icon pointed out.

Also if the Dashicon is a character (?!$, etc.) determine the font it should be based on (Open Sans, right?).

Naming conventions for CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site..

Anything we should specifically not make Dashicons for.

Include an AI template for folks to use.
Ben Dunkle 2:54 pm on January 27, 2015

Good points! Working on it today…
joehills 4:06 pm on January 27, 2015

Thanks for putting this together! Dashicons seem like a great way for new design-oriented contributors to get involved without a high barrier to entry.

Tracy is spot on that it would be valuable to state, “Anything we should specifically not make Dashicons for.”

I’d like to extend Tracy’s suggestion by requesting a list or roadmap of content focus areas where CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. could benefit most. Linking to that list and instructions for submitting the new Dashicons would allow new contributors to jump into Core quickly.
Michael Arestad 3:34 am on February 3, 2015

I think we should include and enforce some of the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. WordPress philosophies to help guide the kinds of icons that are included (or removed) from the Dashicons set.

The first major philosophy is “Design for the Majority.” It’s pretty straightforward.

Next super relevant one is “Clean, Lean, and Mean.” After looking through the icons already in the set, we’re breaking this philosophy a bit. Specifically this bit: “The rule of thumb is that the core should provide features that 80% or more of end users will actually appreciate and use.” Icons like the tickets, the nametag, and the shopping cart probably aren’t useful to 80% or more of our end users. We really should keep the icon set as lean as possible.

“Striving for Simplicity” is one of my favorites. We need to make sure that every icon used has a purpose that helps improve the core WordPress experience.

The Design Team provides design for the WordPress project.

More information

Description

Objectives

Hands-on Walkthrough

The general “style”