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 plugin. 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, trac?] 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.