=== Description
Currently there is not a consistent approach to icon sizing in MF/Minerva. There are generally three icon sizes (small, medium, and large) however the CSS that sizes individual icons is rather inconsistent. There is also inconsistency around the touch areas for icons. This problem became evident as we introduced several new icons into the interface as part of the AMC work. Our plan is to refactor the icon sizing, standardized around the following sizes:
| | **small** | **medium** | **larger than medium**
| icon area | 16x16px | 20x20px | (no standard)
| touch area | 34x34px | 44x44px | (no standard)
| example | {F30159146} | {F30159170} | see T231683
This problem is made worse by the fact that the SVGs themselves are not sized consistently. Some are on 24x24px canvases, others are on 20x20px canvases, with varying degrees of padding within the SVGs themselves (not CSS padding/margins). The work related to replacing icons with properly sized ones will be tracked in T231613.
=== Examples & notes
- Icons in the site header and page-actions toolbar are larger than icons in the menus.
- Various icons, such as "talk" and "special pages", are being rendered larger than intended.
| {F29920166, width=300} | {F29920168, width=300}
=== Developer notes
There seem to be two main causes of this issue:
- The svgs themselves are not sized consistently. Some are on 24x24px canvases, others are on 20x20px canvases, with varying degrees of padding within the SVGs themselves (not CSS padding/margins)
- The `background-size: 100% auto;` rule causes the width of the icons to 100%, which makes them appear larger if the SVG has a width smaller than 20px. //See gif below//.
{F29920201}
{F29920204 width=300}
{F29920258, width=150}
= Sign off steps
[] Make sure all subtasks are tested again and resolved.