Skip to content

Icons: Add arrow-up-right and arrow-down-left#73318

Merged
youknowriad merged 2 commits into
trunkfrom
copilot/add-arrow-up-right-icon
Nov 17, 2025
Merged

Icons: Add arrow-up-right and arrow-down-left#73318
youknowriad merged 2 commits into
trunkfrom
copilot/add-arrow-up-right-icon

Conversation

Copilot AI commented Nov 14, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

What?

Closes #73282

Adds arrowUpRight and arrowDownLeft icons to complete the diagonal arrow set.

Why?

The icons package had arrow-up-left and arrow-down-right but was missing their diagonal counterparts. The arrow-up-right icon is useful as a minimalistic external link indicator.

How?

Added two SVG files following existing arrow icon patterns:

  • arrow-up-right.svg - diagonal arrow pointing ↗
  • arrow-down-left.svg - diagonal arrow pointing ↙

Build script auto-generates corresponding TypeScript components and exports.

Testing Instructions

  1. Build the icons package: npm run build from packages/icons/
  2. Verify exports exist:
import { arrowUpRight, arrowDownLeft } from '@wordpress/icons';
  1. Test in Storybook or by creating a simple component:
import { Icon, arrowUpRight, arrowDownLeft } from '@wordpress/icons';

<Icon icon={ arrowUpRight } />
<Icon icon={ arrowDownLeft } />

Testing Instructions for Keyboard

N/A - No UI changes, icon assets only.

Screenshots or screencast

Arrow Up-Right Arrow Down-Left
Original prompt

This section details on the original issue you should resolve

<issue_title>New arrow-up-right and arrow-down-left icon</issue_title>
<issue_description>## What problem does this address?
The current @wordpress/icons package doesn’t include an arrow-up-right icon, which limits options for anyone who needs one. This is especially useful as a more minimalistic version of the "external" icon.

The package also doesn't include an arrow-down-left icon, we can add this to fully complete the current series of arrow icons.

What is your proposed solution?

Add an arrow-up-right icon to the package so it’s easy for anyone to use. I’ve attached the SVG design, which follows the WordPress icon design guidelines.

Image

SVG arrow-up-right:

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M10 6H18V14H16.5V8.5L7 18L6 17L15.5 7.5H10V6Z" fill="#1E1E1E"/>
</svg>
Image

SVG arrow-down-left:

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M14 18H6V10H7.5V15.5L17 6L18 7L8.5 16.5H14V18Z" fill="#1E1E1E"/>
</svg>

</issue_description>

<agent_instructions>Can you add these two icons to the icons package (follow the same patterns as existing similar icons)</agent_instructions>

Comments on the Issue (you are @copilot in this section)

@jameskoster Seems like a good addition. Is it based on `arrowDownRight` and `arrowUpLeft`? Should we add `arrowDownLeft` as well?

SVG looks good but we shouldn't define the fill in the path itself. I believe that is handled by the Icon component.</comment_new>

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@youknowriad
Add arrow-up-right and arrow-down-left icons
f47911e 
Co-authored-by: youknowriad <272444+youknowriad@users.noreply.github.com>
Copilot AI changed the title [WIP] Add arrow-up-right and arrow-down-left icons to package Icons: Add arrow-up-right and arrow-down-left Nov 14, 2025
Copilot AI requested a review from youknowriad November 14, 2025 22:50
@youknowriad youknowriad added [Type] Enhancement A suggestion for improvement. [Package] Icons /packages/icons labels Nov 14, 2025
@youknowriad youknowriad marked this pull request as ready for review November 14, 2025 22:55
@github-actions

github-actions Bot commented Nov 14, 2025 •
edited
Loading

Copy link
Copy Markdown

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 props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @Copilot, @poligilad-auto.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: Copilot, poligilad-auto.

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@youknowriad

youknowriad commented Nov 14, 2025

Copy link
Copy Markdown
Contributor

This issue closes #73282

Looks like @copilot consistently gets the closed issue number in the PR description wrong.

youknowriad
youknowriad approved these changes Nov 17, 2025
View reviewed changes

@youknowriad youknowriad left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍 Thanks copilot

@youknowriad youknowriad merged commit baffede into trunk Nov 17, 2025
49 of 76 checks passed
@youknowriad youknowriad deleted the copilot/add-arrow-up-right-icon branch November 17, 2025 08:53
@github-actions github-actions Bot added this to the Gutenberg 22.2 milestone Nov 17, 2025
@jameskoster

jameskoster commented Nov 17, 2025

Copy link
Copy Markdown
Contributor

Could potentially have used a changelog update. Not sure how important that is.

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

Reviewers

@jameskoster jameskoster Awaiting requested review from jameskoster

1 more reviewer

@youknowriad youknowriad youknowriad approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@youknowriad youknowriad

Copilot code review Copilot

Labels

[Package] Icons /packages/icons [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

Gutenberg 22.2

Development

Successfully merging this pull request may close these issues.

New arrow-up-right and arrow-down-left icon

3 participants

@youknowriad @jameskoster