Skip to content

Icons: Redraw 65 icons to be stroke-based.#78812

Draft
jasmussen wants to merge 1 commit into
trunkfrom
update/redraw-icons-batch-2
Draft

Icons: Redraw 65 icons to be stroke-based.#78812
jasmussen wants to merge 1 commit into
trunkfrom
update/redraw-icons-batch-2

Conversation

@jasmussen
Copy link
Copy Markdown
Contributor

What?

Sibling PR to #78808, related to #78774. Redraws 65 more icons to be stroke-based, notably arrow/line-heavy utility icons.

With this PR, here's a visual map status update:

batch 2

Teal shows icons in 78808, black shows icons updated in this PR.

It's easy to redraw these, by the way, and this GIF is included to show why in some cases the SVG output is cleaner, because instead of having 6 nodes in the chevron down, we now have 3:

state

Why?

As noted in 78808, the quality of the vectors is improved, it opens up future opportunities, and at present it allows icons to scale with an absolute stroke width, making it possible to mix icon sizes while maintaining a uniform look.

Testing Instructions

Run npm run storybook:dev, then go to Icons > Library. On this page, select 32 or 16px sizes and verify the below list of icons look good.

align-center, align-justify, align-left, align-none, align-right, arrow-down, arrow-down-left, arrow-down-right, arrow-left, arrow-right, arrow-up, arrow-up-left, arrow-up-right, block-meta, category, chart-bar, check, chevron-down, chevron-down-small, chevron-left, chevron-left-small, chevron-right, chevron-right-small, chevron-up, chevron-up-down, chevron-up-small, close, close-small, create, download, handle, home-button, justify-bottom, justify-center, justify-center-vertical, justify-left, justify-right, justify-space-between, justify-space-between-vertical, justify-stretch, justify-stretch-vertical, justify-top, line-dashed, line-dotted, line-solid, list-view, menu, next, plus, position-center, position-left, position-right, previous, pull-left, pull-right, pullquote, reset, resize-corner-ne, rss, search, separator, square, stretch-full-width, stretch-wide, upload

Note: as this batch of icons is rather large, it now includes icons that have high visibility in the block editor itself, which means it is both possible and useful to test these icons also by simply using the editor. You should see no visual changes to icons, such as those for alignments.

Similarly, this now also affects icons that are public, i.e. used in the Icon block. In doing this, I have already found one issue, which I will push a separate PR for, as it relates to CSS specificity and can be fixed separately:

image

Use of AI Tools

Just for todo-listing.

@github-actions github-actions Bot added the [Package] Icons /packages/icons label May 29, 2026
@jasmussen jasmussen self-assigned this May 29, 2026
@jasmussen jasmussen added [Type] Enhancement A suggestion for improvement. [Feature] Icons Related to Icon registration API and Icon REST API labels May 29, 2026
@github-actions
Copy link
Copy Markdown

Flaky tests detected in 42a077e.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26637740767
📝 Reported issues:

@jasmussen
Copy link
Copy Markdown
Contributor Author

For those following along, noting that this PR is not ready for review and is blocked on #78808 landing first so it can be rebased, due to some stroke-based issues uncovered in #78808 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] Icons Related to Icon registration API and Icon REST API [Package] Icons /packages/icons [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant