Icons: Update cloud upload and add cloud download icon.

[matt-west]

What?

Update the cloud upload icon to make the arrow more readable. This PR also adds a counterpart for cloud download this is not currently available.

Figma assets

Current	Proposal
Not available

Why?

The current cloud upload icon likes whitespace around the arrow, which makes it difficult to quickly read at smaller sizes.

There is no cloud download icon equivalent in the current icon package, however this could be useful for interfaces that include push and pull actions.

Testing Instructions

Open Storybook and observe the icons.

Screenshots or screencast

The cloud upload icon is currently used in the editor toolbar on mobile.

Here’s a comparison of how that toolbar looks with the current and proposed icons.

Current	Proposal

Here’s a continuity test showing the new icons alongside others in the icon package.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @matt-west! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[github-actions]

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.

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

Co-authored-by: matt-west <mattwest@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

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

[matt-west]

@jasmussen @jameskoster Would you mind taking a look at this proposal for updating the cloudUpload icon to improve readability. I also added a corresponding cloudDownload icon to complete the set.

This work came out of a new push/pull feature we’re building for Studio, but thought it would be useful to have in Core too.

I’ve maintained the current cloud dimensions which fit snuggly within the 16px guide. It feels a touch small to me in comparison to other icons though. What do you think?

[jasmussen]

At a glance, looks substantially improved, solid work.

Do note that, at least for the moment and this is pending better ideas, the "cloud upload" button is the icon-fallback for "Save draft", when the post editor is on mobile. This was never great, and worth looking at separate mobile editing improvements, so that it can perhaps become a text button on mobile instead. But does this change anything as far as this work? My instinct, no, it's fine.

[matt-west]

the "cloud upload" button is the icon-fallback for "Save draft", when the post editor is on mobile. This was never great, and worth looking at separate mobile editing improvements, so that it can perhaps become a text button on mobile instead.

Agreed. At the resolution shown below, it could make more sense to use an icon for the Preview button and display the Save draft text instead. There may not be enough space to accommodate that in non-English languages though.

[jameskoster]

Looks good to me, nice work. But lets update the svgs so they include a single path. We should add a changelog entry too.

[matt-west]

Thanks @jameskoster. I’ve reduced the icons to a single path and added entries to the changelog.

[jameskoster]

Looks good to me. Thanks so much :)

[matt-west]

@jameskoster Can you please set this to merge again. I rebased to bring in some changes from trunk that fixed a broken test but it disabled the auto-merge.

[jameskoster]

Done! Thanks again.