In bug 2027859 people have noticed that turning on the Nova design tokens with browser.design-tokens.nova will clip some of the toolbarbutton icons in the nav bar.

The main difference with the Nova tokens on is that border-radius goes from 8px to 9999px.

The <image> element has 16x16 content area with 8px padding all around.

The circle border-radius effect is working well for the hover effect: the darker background produces a circle around the icon. However, it appears that the <image> content area itself is getting clipped.

Bug 1999100 recently set xul:image elements to use overflow-clip-margin: content-box https://searchfox.org/firefox-main/rev/37ae122d8d03366820f487aeac25e74a4be97fab/toolkit/content/xul.css#641-645. With these 16x16 SVG icons that often have paths intersecting their viewbox edges, it makes sense that clipping to the content box with a circular border could cut off some icon content.

All XUL elements use box-sizing: border-box by default. Setting overflow-clip-margin: border-box on the toolbarbutton icon elements looks good to me, with and without the Nova tokens.

https://hg.mozilla.org/mozilla-central/rev/541af7885855