New Component Request: Icon

Open
#1,065 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
30/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Stale
Tech stack
scss
Domain
design, frontend

Research direction

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.

Written by the indexing model from the issue text.

Description

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.

Dominant language
SCSS
Stars
298
Forks
83
Avg merge
9d 7h
Merged PRs (30d)
7

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mozilla/protocol

All issues in mozilla/protocol

Similar issues

More Design issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.