Add size prop to Icon component

[joshfarrant]

Summary

Adds size prop to Icon component following @simmonsjenna's suggested sizing, and @danielguillan's Figma designs.

List of notable changes:

• Added size prop
• Added tests
• Updates stories
• Condensed styles

What should reviewers focus on?

• There's an !important in the CSS. If you're not happy with that then I'm happy to tweak the approach to use specificity to override the background styles instead.
• Happy with the new stories?

Steps to test:

• Play around in the Storybook playground

Supporting resources (related issues, external links, etc):

• Works towards [Modification Request] Update the icon in Bento.Item to appear the same as Card (with a background) #773

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• New visual snapshots have been generated / updated for any UI changes
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

Screenshots:

[changeset-bot]

🦋 Changeset detected

Latest commit: 2fef888

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@primer/react-brand	Patch
@primer/brand-primitives	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-config	Patch
@primer/brand-storybook	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🟢 No design token changes found

[github-actions]

⚠️ Visual differences found

Our visual comparison tests found UI differences.

Please review the differences by using the test artifacts to ensure that the changes were intentional.

Artifacts can be downloaded and reviewed locally.

Download links are available at the bottom of the workflow summary screen.

Example:

If the changes are expected, please run npm run test:visual:update-snapshots to replace the previous fixtures.

Review visual differences

[joshfarrant]

NextJS seem to be in the process of messing around with their React version (they're currently on a React 19 RC), which is the underlying cause of the pipeline failure.

If you're happy to just ignore the failing check for now @rezrah then we can come back to it once it's settled down.

[rezrah]

Can we max out at 44 please per this guidance

Suggested change

	export const numericIconSizes = [12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52] as const
	export const numericIconSizes = [20, 24, 28, 32, 36, 40, 44] as const

[joshfarrant]

Happy to do that if @danielguillan is happy.

These numbers have come from Dani's FIgma designs

[rezrah]

Ah cool, that's good to know. We'll need to follow up In Figma after too, as the Site guidance supersedes that. Particularly in the React version, we'd want to provide the correct guardrails so recommend we go ahead with the 20-44 range.

[joshfarrant]

That's updated

[danielguillan]

I'm happy to limit the scale and expand it later if needed. I just want to check with @simmonsjenna to confirm that we've considered scenarios beyond Bento, Card, and Pillar in making this decision. For example, I'm thinking about icons that align with the default body text (16px) in Primer Brand components like Button, Label, and UnorderedList, among others. I'm not suggesting we necessarily use Icon in those, but those are potential use cases. Also custom elements might benefit from the expanded scale as there are several places in dotcom where use icons smaller than 20 and larger than 44.

[simmonsjenna]

@danielguillan Great point — I need to do a more in-depth audit of icon usage across those scenarios you mentioned. I think we can expand it later to include those smaller icon instances as well.

Are there any examples where an icon larger than 44 is live?

[danielguillan]

Sounds good!

I believe there's only one icon larger than 44 in landing pages but there are some more on product pages that could potentially use Primer Brand components at some point (e.g., upsell). That said, we don't need to support those larger sizes if we want to discourage that. Octicons aren't actually designed for larger sizes either way. We can create some guardrails around that.

[rezrah]

Looks great! Visual snapshots will need an update, but otherwise

[danielguillan]

Looks great! I left one comment about the numeric size scale, but it's non-blocking.