Per discussion in {T310665}, specifically brought by @Etonkovidova in T310665#8426469 the information icons shown across GrowthExperiments extension have discrepancies in size and behavior for `arwiki` and other languages where a light bulb graphic is shown instead of a latin character (i). This problem can be seen in both newcomers homepage and the mentor dashboard.
|Homepage| Homepage Arabic | Mentor dashboard Arabic |
| {F36347036}|{F35823184}|{F36337589}|
This is due to the use of two different source icons, `ìnfo-unpadded` and `CdxInfo`. The table below summarizes the sizes of each icon instance:
| Icon | Source size ( [[ https://doc.wikimedia.org/codex/main/icons/all-icons.html | codex docs ]] ) | Design requirement size ([[ https://www.figma.com/file/fOa1x7hw6EM9VnaMJv7vib/Positive-reinforcement?node-id=1469%3A124528&t=EnYyDFkU1eCF13ym-0 | Figma ]]) | Current size homepage | Current size mentor dashboard | Proposed size |
| Codex `CdxInfo` | 20px x 20px ( svg has gutter ) | 16px x 16px (user impact)| 20px x 20px (suggested edits), 16px x 16px (user impact) | 24px x 24px | tbd|
| Codex `CdxInfo` (light bulb) | 20px x 20px ( svg has gutter ) | - | 20px x 20px (user impact) | 24px x 24px (mentee overview) | tbd |
| OOUI `info-unpadded` | 20px x 20px | - | 20px x 20px (suggested edits top) 20px x 30px (task title inline) | 20px x 30px (mentor tools) | Drop usage |
| Icon |
| OOUI `info` | 20px x 20px | - | Not used yet | Not used yet | tbd |
Since we are mixing OOUI and Codex icons it would be convenient to create some styles that help us display both types of icons in a consistent way.
**Acceptance criteria**
- [] All information icons use the light bulb graphic in Arabic
- [] Icons with the same semantics use the same color palette and sizing
- [] Clickable icons have a defined size for its clickable area (eg: Button type=quiet)
- [] Enabled icon-only buttons have a defined color
- [] Disabled icon-only buttons have a defined color
- [] DRAFT: Icons size adapt to the platform desktop/mobile
- [] Create a CSS utility or LESS mixin to make it easy to match icons from both libraries on the same page
**Notes**
Since it seems we mostly use "icon only" buttons as inline help for a particular line or lines of text I wonder if the size should be defined relative to the font-size. That wouldn't solve the size discrepancies still but would align them with the font-size discrepancies we have, eg: {T312245}.