feat(icons): Add cloud-check icon

[lscheibel]

closes #2564
closes #2160

What is the purpose of this pull request?

• New Icon
• Bug fix
• New Feature
• Documentation update
• Other:

Description

Adds new cloud-check icon

Icon use case

My use case is for a "sync with cloud" feature, where I show the icon similar to how Google Docs does it, when the document is in sync with what is stored on the server.

I can't think of other non-arbitrary use cases, but considering the popularity of Google Docs as well as the two related issues, I'd say this is not particularly niche.

Alternative icon designs

#2564 contains a few other designs. The icon is very similar to those posted there, especially the one from @jguddas but with the checkmark more balanced within the cloud (imo, of course).

I'm using this design for a project, but since there are other designs available as well feel free to close this PR if it doesn't match your expectations.

Icon Design Checklist

Concept

• I have provided valid use cases for each icon.
• I have not added any a brand or logo icon.
• I have not used any hate symbols.
• I have not included any religious or political imagery.

Author, credits & license

• The icons are solely my own creation.
• The icons were originally created* in Cloud with a check #2564 by @jguddas. (*influenced by)
• I've based them on the following Lucide icons: cloud, circle-check
• I've based them on the following design:

Naming

• I've read and followed the naming conventions
• I've named icons by what they are rather than their use case.
• I've provided meta JSON files in icons/[iconName].json.

Design

• I've read and followed the icon design guidelines
• I've made sure that the icons look sharp on low DPI displays.
• I've made sure that the icons look consistent with the icon set in size, optical volume and density.
• I've made sure that the icons are visually centered.
• I've correctly optimized all icons to three points of precision.

Before Submitting

• I've read the Contribution Guidelines.
• I've checked if there was an existing PR that solves the same issue.

[github-actions]

Added or changed icons

Preview cohesion

Preview stroke widths

DPI Preview (24px)

Icon X-rays

Icon Diffs

Icons as code

Works for: lucide-react, lucide-react-native, lucide-preact, lucide-vue-next

const CloudCheckIcon = createLucideIcon('CloudCheck', [
  ["path",{"d":"m17 14-5.5 5.5L9 17"}],
  ["path",{"d":"M5 16.743A7 7 0 1 1 15.71 9h1.79a4.5 4.5 0 0 1 1.5 8.742"}]
])

[ericfennis]

Nice work!

[jguddas]

The cloud is shifted?

[lscheibel]

It's moved one pixel up to make it visually centered by compensating for the "heavy bottom". Otherwise, it looks a bit low when centered next to text.

[jguddas]

It's moved one pixel up to make it visually centered by compensating for the "heavy bottom". Otherwise, it looks a bit low when centered next to text.

That will make it twitch when used in a toggle state 😢

[lscheibel]

Hm yeah, the way I'm using the icon right now is with the loader-circle and cloud-alert, so there it works.

Here are the groups of icons where the main cloud is aligned:

• cloud, cloud-off
• cloud-cog, cloud-download, cloud-upload and all the weather clouds
• cloudy
• cloud-sun, cloud-sun-rain, cloud-moon, cloud-moon-rain
• cloud-alert, cloud-check

The question is basically, do we want individual icons centered visually, or should icons always be aligned in the "group" they belong to? The latter would sacrifice visual alignment when the icon is used stand-alone and not next to other icons from the group or as toggle. Either way if we decide to move cloud-check down a pixel, I'd probably also move the cloud-alert icon down a pixel

Should be aligned with other cloud icons.

[ericfennis]

The cloud icon should be aligned with the other icons you mentioned from the group.
Consistency is more important than the "visually centered rule" IMO.