docs(icon): update size ranges in Style table#3110
Open
coreyvickery wants to merge 2 commits into
Open
Conversation
Correct icon set size values and normalize the Icon set column label on the Style docs page. Co-authored-by: Cursor <cursoragent@cursor.com>
|
✅ Deploy Preview for red-hat-design-system ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
Size Change: 0 B Total Size: 322 kB ℹ️ View Unchanged
|
Contributor
Documentation HealthNo relevant changes in this PR. |
The demos layout rendered 90-demos.md twice, which duplicated the icon demos info alert. Co-authored-by: Cursor <cursoragent@cursor.com>
adamjohnson
reviewed
Jul 21, 2026
adamjohnson
left a comment
adamjohnson
left a comment
Collaborator
There was a problem hiding this comment.
In the PR summary, it might be good to also mention the changes to element.11ty.ts. They remove the double "Looking for icons?" alert seen on uxdot versus this PR's deploy preview.
Currently, rh-icon is the only element with a 90-demos.md file, so this is a safe change to make.
Comment on lines
+50
to
+53
| | Standard (default) | 24px - 128px | | ||
| | UI | 16px - 24 pixels | | ||
| | Micron | 8px - 12px | | ||
| | Social media | 16px - 24 pixels | |
Collaborator
There was a problem hiding this comment.
This table now mixes px and pixels. Should the second value under Size range always use pixels?
marionnegp
requested changes
Jul 21, 2026
| | Social media | 14px - 24 pixels | | ||
| | Standard (default) | 24px - 128px | | ||
| | UI | 16px - 24 pixels | | ||
| | Micron | 8px - 12px | |
Collaborator
There was a problem hiding this comment.
We need to account for 14px UI icons, like in the Felt-themed compact CTA.
Collaborator
There was a problem hiding this comment.
We'll need to check with Brand about the size ranges for the icon sets. Their "Standard icons" page says it works best for 32 - 100px, and their "UI icons" page says: "UI icons are designed to be used between 16px and 32px. Microns are extremely small, and are designed to be used between 10px and 20px." Not sure if those were updated after our rh-icon docs were published.
Collaborator
Author
There was a problem hiding this comment.
@marionnegp I think our design tokens should be what the Brand team follows, not the other way around. We don't have a token for 100px icon size.
It sounds like in the near future we will need a token for the 14px icon size, so I guess that change can be reverted.
Also, it doesn't make visual sense to be using pixels and px. Can we choose one over the other?
Collaborator
There was a problem hiding this comment.
Can you add the icon size ranges as a topic for our DPO systems group or pose the question in a Slack channel with the Brand team? I think we'd want their values to be consistent with ours and PatternFly's, unless there's another design use case that needs non-token values.
I'd choose px because that's used more consistently throughout our docs.
I've created an issue in the tokens repo to add more icon size tokens.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
coreyvickery
commented
Jul 22, 2026
coreyvickery
left a comment
coreyvickery
left a comment
Collaborator
Author
There was a problem hiding this comment.
@adamjohnson Need to revert line 51 back to its original range.
| | Micron | 8px - 12 pixels | | ||
| | Social media | 14px - 24 pixels | | ||
| | Standard (default) | 24px - 128px | | ||
| | UI | 16px - 24 pixels | |
Collaborator
Author
There was a problem hiding this comment.
Suggested change
| | UI | 16px - 24 pixels | | |
| | UI | 14px - 24 pixels | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Icon set, Standard max128px, UI/Social min16px, and Micron max12px.Test plan
/elements/icon/style/Made with Cursor