New Component Request: Icon

Please describe the use case(s) for this component

We want consistent size options for icons (sm/md/lg/xl)

We want to allow responsive color changes for icons used within links and buttons (currently we flip the color in background image CSS or use inline SVG icons that are detached from the system and hard to track). See spreadsheet for current use of inline SVG on bedrock [Moz only]

Please provide any designs or previous implementations of the proposed component

Figma icon sizing: https://www.figma.com/design/suoIg5SaAgAyK9ckPpIGRG/Revised-Design-System-%7C-Mozilla.org?node-id=508-7008&m=dev [Moz only]

Please describe what this component does in the following conditions

• When set in front of a dark background

• When set in front of a light background
  will match text color

• When viewed in a mobile/responsive viewport
  will resize with text size, unless locked into preset size (i.e. mzp-t-sm)

Please provide examples of this type of component in use in non-Mozilla web properties

Shoelace uses currentColor to determine icon color from inheritance: https://shoelace.style/components/icon#colors (this would be helpful for links and buttons that change color on hover/focus etc.)

Set sizes use in
Primer: https://primer.style/octicons/icon/accessibility-24/
Forma36: https://f36.contentful.com/components/icon#icon-sizes

Ton of other examples here: https://component.gallery/components/icon/

Is the development of this component a blocking dependency for other work? Please explain if so

Nope, but it's an ideal time to implement as we're updating Mozilla icons. Being able to replace the inline SVGs with more standard components would help consistency and maintenance. Having preset sizes would put us more in line with Figma, so designs are easier to translate to code.

Start by reviewing the linked Figma icon sizing design and the Shoelace, Primer, Forma36, and component.gallery examples. Done means defining an Icon component with preset and responsive sizing plus inherited color behavior across dark and light backgrounds, links, buttons, and responsive viewports.