User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

1. Open firefox build 89 (also occurs in latest nightly)
2. Right click on the toolbar and select customize toolbar
3. Drag the following icons on to the toolbar: home, take a screenshot, zoom level, bookmark menu, back/forward.
4. Observe the top, bottom, and side of each icon

Actual results:

Icons appear to be off centered either vertically or horizontally as they do not evenly divide in to 16x16 icon sizes.

Expected results:

Icons are all 16x16 or another square size that fits centered within a 16x16 pixel space.

The Bugbug bot thinks this bug should belong to the 'Firefox::Toolbars and Customization' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Hi,

I've tried replicating this on me end on: windows 10 pro
On the following versions:
release 89.0 (64-bit)
Installed both beta 90.0b4 and nightly 91.0a1 (2021-06-07) (64-bit)
I am attaching a screenshot of what I'm seeing, seems a bit subtle. Can you confirm if you can visualize the issue in my screenshots as well?

Thanks for the report.
Best regards, Clara.

That's essentially it, in the attached screenshot the red light is showing which row of pixels make the icon appear off center. Its very minor/subtle for most things but feels more pronounced on the arrows which have a kind of shadow on them from the anti aliasing that makes them seem much further down/smaller than other icons. The bookmark menu seems the most obvious when placed next to the home button, because of the home button being "down" one pixel and the bookmark button being "up" one. I haven't checked all of the hover backgrounds but it appears there as well seen in the Import Bookmarks button which is 8 pixels on one side and 9 on the other. ]

Extremely minor but once you see it then its hard to not notice.

Hey sfoster, is there a previously known bug that I should dupe this to?

(In reply to Mike Conley (:mconley) (:⚙️) from comment #7)

Hey sfoster, is there a previously known bug that I should dupe this to?

I don't think we have a bug for this issue, though the issue is well known and much discussed. This can be that bug.
I'd like to keep this bug as specific as possible and identify specific icons that aren't centered in the 16x16 grid and which should/could be improved by re-drawing them to center the main glyph in the grid. Because we also have bugs like Bug 1708879 where centering the lock in the security-warning.svg results in a separate complaint that the locks in each state don't line up with each other.

In the end, the way these icons are used is a lot like characters in a font, yet we don't have the kerning-pair facilities that a real font has, so I want to be careful that we don't "fix" alignment in one context only to make things look worse in another.

This is a known trade-off we have to make when designing new icons. We have an even pixel grid and some shapes are difficult to center while also align to that grid. The UX/Icon design team is very aware of this issue and its something we can keep in mind for future icon updates, but not something we can address for the current set.