Icons: Redraw 35 prominent icons to strokes, and maintain absolute stroke-width#78808
Open
jasmussen wants to merge 7 commits into
Open
Icons: Redraw 35 prominent icons to strokes, and maintain absolute stroke-width#78808jasmussen wants to merge 7 commits into
jasmussen wants to merge 7 commits into
Conversation
jasmussen
added
[Type] Enhancement
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Contributor
Author
|
A note that I forgot to mention: as I carefully hand-redraw these, some curves and vectors become more precisely positioned, clearly mistakes from previous iteration. In 95% of the cases in this batch, the end result when seen at 24x24 is invisible. However I want to point out a couple of icons were very slightly visually refreshed as part of this, in case that invites feedback. IMO, it's not enough to warrant a changelog entry beyond what this PR can benefit from regardless, but for your awareness:
|
|
Flaky tests detected in ae0f274. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26757192092
|
Contributor
|
Wonderful! Since this involves redrawing icons, would it make sense to address some of the low-hanging fruit in #65786 as well? For instance applying endcap-roundness consistently, pixel grid alignment, and footprint consistency? |
Contributor
Author
|
Yes it does indeed! And notably the pixel grid alignment I've been fixing here. There's been a lot discovered. I've also unified a couple of circles that were off-size. I'm hesitant to do too much, but would be happy to follow up after we land a good new stroke based baseline. One really potent improvement as I do this: the new icons are subtantially easier to edit and work with, because what we used to call the "icon source", the stroke based version we would go ahead and convert to fills, that is now the icon that we ship, one and the same, so the Figma to GitHub flow is now very much improved. The short is, once this is done, it should be both easier to contribute, to edit, to consolidate, and all that. |
Contributor
|
Yes, appreciate it's a balance; we want to avoid scope creep. I'm just aware that it might be easier to tweak these things in one go rather than sequentially, with no meaningful trade-offs that I can think of. One other thing that springs to mind from a previous exploration around converting the icons to be stroke-based... there is quite a bit of css in Gutenberg that targets icons with |
github-actions
Bot
added
[Package] Components
jasmussen
force-pushed
the
update/redraw-34-icons-to-stroke-based
branch
from
d336873 to
9c97f83
Compare
Contributor
Author
|
It's funny you should mention that, because in testing other things, I found issues with exactly that: 
This is now fixed, but I will write some additional detail on the fix in context of the code. 
|
jasmussen
commented
May 29, 2026
|
|
||
| svg, | ||
| path { | ||
| svg { |
Contributor
Author
There was a problem hiding this comment.
This change was necessary because without it, everything gets a fill, including what is meant to just be a stroke based circle (with a hole in the middle).
I prefer to keep PRs minimal, but this one was necessary in order for this PR to be possible to land. I have some additional changes I want to push—a normalisation script and some more resilience, but this was a minimal change I was able to do. I wasn't able to find any ill consequences from this change, but CC'ing some component experts for a gut check: @mirka @ciampo
jasmussen
commented
May 29, 2026
| <HStack justify="flex-start"> | ||
| { icon && ( | ||
| <Icon | ||
| style={ { fill: 'currentcolor' } } |
Contributor
Author
There was a problem hiding this comment.
This rule overrode the SVG that was inserted, and forced a fill rule on it, making it impossible to use stroke-based icons.
jasmussen
commented
May 29, 2026
| return `${ camelKey }: '${ value }'`; | ||
| } ) | ||
| .join( ', ' ); | ||
| return ` style={ { ${ declarations } } }`; |
Contributor
Author
There was a problem hiding this comment.
This change was required so the inline style="fill: none" on stroke icons gets translated to React's object form during build. Without it, React ignores the style and the icons render filled.
Claude Code helped me with this, btw.
|
Size Change: +3.38 kB (+0.04%) Total Size: 8.21 MB 📦 View Changed
ℹ️ View Unchanged
|
mirka
reviewed
May 29, 2026
| @@ -1,3 +1,3 @@ | |||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |||
| <path d="M18.5 5.5V8H20V5.5h2.5V4H20V1.5h-1.5V4H16v1.5h2.5zM12 4H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2v-6h-1.5v6a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5h6V4z" /> | |||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: none" stroke="currentColor" stroke-width="1.5"> | |||
Member
There was a problem hiding this comment.
We're now adding a lot of explicit currentColor in the icons themselves. This is going to result in inconsistent behavior across icons.
Here's the icon library in a color: red context:
| Before | After |
|---|---|
 |
 |
Unlike Icon in either wp-components or wp-icons, the new Icon from wp-ui applies a fill="currentColor" by default. Here's the icon library modified to use the wp-ui version:
If we're going with these stroke-based icons, I think we're probably forced to add explicit currentColor in the icons themselves, for all the icons, not just the ones that have been redrawn here.
Contributor
Author
There was a problem hiding this comment.
If we're going with these stroke-based icons, I think we're probably forced to add explicit currentColor in the icons themselves, for all the icons, not just the ones that have been redrawn here.
I volunteer to do that 🙋♂️
Before I do, I want to just check with you if you're okay with this? Is it functionally a good choice? IMO yes as this is the implied behavior of the icon set and it's worth making explicit. I also expect to follow up with a PR that adds a script to do this on every build of the set.
This was referenced Jun 1, 2026
jasmussen
force-pushed
the
update/redraw-34-icons-to-stroke-based
branch
from
c0c5a96 to
3568808
Compare
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-authored-by: Lena Morita <lena@jaguchi.com>
jasmussen
force-pushed
the
update/redraw-34-icons-to-stroke-based
branch
from
3568808 to
5d10653
Compare
jasmussen
changed the title
Contributor
Author
|
This PR has been updated to include changes from the now-reverted #78774 (as well as a rename from It remains ready for review and input on the overall approach, and available for testing in both storybook and the editor. I've not been able to "break it". #78812 is a followup PR that adds even more icons, but I will pause that PR for this one to land first once an approach is agreed on, then follow up/rebase. After that, I hope to explore separate linting PR that ensures SVGs added work well for the stroke-based system. After that, I'll re-draw the remaining icons, per this comment. |
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
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.
What?
Followup/replacement to #78774, which now includes the change including resilience for compatibility.
In this PR, I redrew/changed 34 icons to be stroke-based rather than purely fill-based. An existing icon was already stroke-based,
square. This brings an enormous amount of flexibility as far as future animation and customisation properties, it simplifies the Figma to Icon flow, but notably it means that icons now maintain their stroke-width across sizes. Paragraph shown as example, 16, 24, 32px sizes:Why?
For the majority of these icons, no visual change should be perceptible in where they are used today, because we use them mostly in their standard 24x24px sizes. And we do that specifically because of the shortcoming in how they scale, shifting stroke-width making them look out of place next to each other.
By enforcing a monoline stroke-width, icons can now be shown at virtually arbitrary sizes (though they can get fuzzy if shown really small), and yet still feel as if they belong together since their stroke-widths are maintained. A future perspective is even to allow consumers of the componentry to either animate the stroke, both the width and the dash-style, offering some interesting options, such as how this WordPress logo is animated.
How?
This PR includes both the tech to maintain a uniform stroke-width across icon dimensions, as well as 35 icons that take advantage of it. I am working in a WIP Figma file to go through all existing icons, as such:
In black, those are the icons in this PR, done/redrawn. In red, still todo. In blue, icons we will not be redrawing as they are not/can't be stroke-based. In gray, icons that need redesigns anyway. Once this effort is done, these icons will move to the main Figma design library. I believe there are some additional icons shipping in trunk that are not depicted in this list, but I will be sure to identify those once I'm through this effort.
Testing Instructions
Check out the PR; run npm run storybook:dev, go to Icons > Library, and then observe that at both 16, 24, and 32, that icons look as intended. These icons:
Use of AI Tools
Claude Code was used to extract a todo-list of icons for me, but the rest is hand-rolled, human spirit work.