Add rem-based sizing support to GlIcon for improved accessibility

Description

The GlIcon component currently uses fixed pixel values for icon sizing, which causes layout inconsistencies when users have non-default text sizes configured in their browser settings. Loading icons (which use rem values) can cause text to shift when they appear alongside icons using fixed pixel sizes.

Problem

When users configure non-default text sizes in their browser:

  • GlIcon uses fixed pixel values in icon.scss:
  • GlLoadingIcon uses rem values via design tokens in loading_icon.scss (e.g., $gl-spacing-scale-5: 1rem, $gl-spacing-scale-6: 1.5rem)

This mismatch causes visual shifting and layout instability when a loading spinner replaces or appears alongside an icon.

Example scenario: In the file tree browser, when a folder expands, a loading spinner temporarily replaces the folder icon. Users with larger browser font sizes experience text shifting because the spinner scales with their preferences while the icon does not.

Related issue: gitlab-org/gitlab#587277

Proposal

Add support for rem-based sizing to the GlIcon component to ensure icons scale appropriately with user browser settings.

Proposed approaches (for discussion)

  1. Switch to rem values directly - Replace fixed pixel values with equivalent rem values (e.g., 16px → 1rem). This provides immediate accessibility benefits but may cause unintended side effects in existing implementations.
  2. Introduce an optional property - Add a new prop (e.g., scaleWithText or useRemSizing) that enables rem-based sizing when set to true, defaulting to the current behavior for backward compatibility.
  3. ...

Why this matters

  • Accessibility: Users with visual impairments often increase their browser's default font size. Icons that don't scale with text can become disproportionately small and harder to perceive.
  • WCAG compliance: Supports WCAG 1.4.4 (Resize text) by ensuring UI elements scale appropriately when text is resized up to 200%.
  • Consistency: Aligns icon sizing behavior with the GlLoadingIcon component, preventing layout shifts when icons and spinners are used interchangeably.
  • User experience: Provides a more cohesive experience for users who customize their browser settings for readability.

Checklist

Make sure the following are completed before closing the issue:

  1. Assign the correct component label to this issue.
  2. Create an MR with the additions or updates needed.
  3. Be sure to get your MR reviewed by a FE/UX Foundations designer.
  4. When applicable, create an MR in Pajamas to update the demos. If you do not have capacity to complete the demos, create an issue in Pajamas and bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
  5. When applicable, create an MR in Pajamas to update the component status.
  6. When applicable, create an issue in Pajamas using the "Component Documentation" issue template to update guidelines. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
  7. When applicable, create an issue in Pajamas using the "Figma update" issue template to update the Figma UI Kit. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
  8. When introducing a major or breaking change, communicate the changes within the Engineering Week in Review.
  9. 🎉 Congrats, you made it! You can now close this issue.
Edited by Jacques Erasmus