Customiser menu item added tick icon is too small, plus icon is too big.

[paulwilde]

The tick icon when you add a menu item is way too small in relation to the plus icon that it just looks bad together.

Where else in the interface is the plus and tick used? As maybe these icons can be altered slightly so they work better together. If you compare the plus icon to the cross icon (the red close ones on the left of my screenshot) the lines look twice as thick.

If the plus icon matched the cross icon in thickness and size (basically flipped 45deg), and the tick icon was made a tiny bit larger I think they would all go together nicely.

Also see #32733 for a similar issue.

[paulwilde]

Introducing a dashicons-plus-alt icon which has the same line thickness as dashicons-no-alt would fix this.

Although I do still feel that the tick icon (dashicons-yes) still seems a little too small when you compare it next the red crosses (dashicons-no-alt). Maybe that's just me.

[afercia]

In-browser comparing some of the related icons. Also, the plus icon vertical alignment could be improved.

Although I do still feel that the tick icon (dashicons-yes) still seems a little too small

+1 :)

[celloexpressions]

Again, this would probably need to be fixed by modifying the dashicons (could maybe just use a rotated thin x icon though). The plus icon feels way too heavy to me; ideally we'd lighten that up and size it down. I suppose the check could be a bit larger, but it works much better right now (looks like the vertical alignment is a bit off relative to the menu item title, though). Ideally the plus icon should use the darker color to match the text of un-added menu items also, but with the current icon that's way too heavy. @melchoyce - any thoughts here?

[melchoyce]

Also, the plus icon vertical alignment could be improved.

Unfortunately, it can't be improved without either converting Dashicons to svg so it's not confined to a specific grid (which we're in the process of trying), making the icon unevenly sized, or using half-pixels to visually align the icon to the center of the grid, thus rendering it blurry.

@melchoyce - any thoughts here?

Not really sure what the best course of action is. We could make a new icon, but then we're just continuing to add more to the font when the real problem is that font anti-aliasing limits icon resizing. Going to call in @empireoflight since he's both the original designer of Dashicons and significantly more experienced than I am at this. :)

[EmpireOfLight]

We made the plus sign thinner and f132 was updated on the dashicons repo:
​https://github.com/melchoyce/dashicons

Not sure why it didn't make it into the latest WP version though. We should revisit this after the thinner + gets added in.

[celloexpressions]

Can we get that icon change in? What's holding it up?

[EmpireOfLight]

Waiting for approval on the latest round of icons based on these tickets:

https://core.trac.wordpress.org/ticket/30902
https://core.trac.wordpress.org/ticket/32678

I did make the check icon slightly larger, but hardly noticeable. The latest plus is thinner.

[ocean90]

Both icons have been updated in [33108], see 32734-updated-dashicons.png​. Since the plus icon now aligns we have to update the top values.

[paulwilde]

The new plus icon has uglified the "Add Items" button dashicon. The length of the lines also seem longer when compared against the red cross icons.

I think introducing another alternative would of been better rather than trying to fit 1 icon into everything. See ticket:30902#comment:34 for reference.

What I'd suggest is the following:

• Revert dashicons-plus to its old version.
• Introduce a dashicons-plus-alt which has the same line thickness and length as dashicons-no-alt. Basically dashicons-no-alt flipped 45 degrees.

[ocean90]

Related chat about the plus icon: ​https://wordpress.slack.com/archives/design-dashicons/p1436287899000242

[ocean90]

In 33152:

Customizer: Replace the plus icon for #available-menu-items .item-add with a thinner one, see [33126].

fixes #32734.