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

There’s a WordPress Component Library in Figma. Duplicate to edit, direct access is reserved for the design team. Figma accounts are free, but edit access is not.

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.

More information

Iconography

WordPress Icons are available to use in Storybook. They are designed and exported from this page in the WordPress Design Library Figma. Here’s more on how to use the Figma library.

Dashicons are deprecated, but still available to use.

Design Guidelines

  • Icons use a 24x24px grid.
  • Lines should be 1.5px wide, but have one edge hinted to the nearest whole pixel.
  • Corner radius should measure 1px most of the time, 2px where appropriate.
  • Icons are facing, flat, and avoid faux 3D.
  • They should be simple. Consider extraneous details within the icon. Are they really necessary?
  • They should be universal. Are your own demographics influencing the symbol you’ve chosen for the icon?
  • They should be consistent. Examine your icon in context. How would it look in the wp-admin environment?

Classic iconography

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.

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.

Icon Guidelines

  • Icons live in a 20×20 pixel grid
  • Lines should be 2px wide (ex: https://cloudup.com/cYgij8rwfXS)
  • Corner radius should measure 1pt/px (ex: https://cloudup.com/c4Hh9J3lbbz)
  • They should be simple. Consider extraneous details within the icon. Are they really necessary?
  • They should be universal. Are your own demographics influencing the symbol you’ve chosen for the icon?
  • They should be consistent. Examine your icon in context. How would it look in the wp-admin environment?

Resources

Last updated:

s
search
c
compose new post
r
reply
e
edit
t
go to top
j
go to the next post or comment
k
go to the previous post or comment
o
toggle comment visibility
esc
cancel edit post or comment