Non-standard/Deprecated icons are not consistent

Summary

The entire page and compatibility section uses different icons for the same ‘Non-standard’ badge. Same is the case with Deprecated badge. Same icon 👎🏻 has different meanings, in different sections on the same page.

URL

https://developer.mozilla.org/en-US/docs/Web/API/Window#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/API/Window#methods

Reproduction steps

1. Open the URL and search mozpaintCount property.
2. In properties section you’ll see assigned badges like this: Note: 👎🏻 => Non-standard 🗑 => Deprecated
3. Now go to browser compatibility section. You’ll see: Note: 👎🏻 => Deprecated ⚠ => Non-standard
4. Now open page https://developer.mozilla.org/en-US/docs/Web/API/Window/mozPaintCount . There you’ll see: Note: ❌ => Deprecated ⚠ => Non-standard
5. Note, same icon 👎🏻 has different meanings, on the same page. The icons used are different for the same badges.

Expected behavior

Icons should be consistent across the entire site.

• 1. 🗑 should mean Deprecated everywhere on the website. Compatibility section and notecards need to be corrected.
• 2. ⚠ should mean Non-Standard everywhere on the website. CSS rule icon-nonstandard needs to be corrected on main page. The icon 👎🏻doesn’t fit well here, and has negative tone.

Less severe issues:

• 3. Same icons should be used everywhere e.g. Experimental icon looks different everywhere: The flask is different for compatibility and main section.
• 4. Quick links sidebar has colored badges. Looks odd. Can we have same black and white badges there too?
• 5. Currently badge order is different at 3 places(mentioned in Steps to Reproduce section). For sake of consistency the badges should appear in same order every where e.g. deprecated -> experimental -> non-standard. Or the order can be decided based on the danger of using such APIs, i.e. deprecated are more harmful than experimental, cos they can creep into production easily, and so on.

Actual behavior

• Icon 👎🏻 represents different badges in main content(non-standard) and in browser compatibility(deprecated).
• Deprecated badge uses different icons ( 🗑, 👎🏻 , and ❌) at different places: main content, browser compatibility, and notecards.
• Icons have different flavors at different places. In quicklinks sidebar icons are colored.

Device

Desktop

Browser

Chrome

Browser version

Stable

Operating system

Windows

Screenshot

No response

Anything else?

No response

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

[danielhjacobs]

1-3 fixed by #5583

[caugner]

We are consistent now, and we’ll keep the colors until further notice.