Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add cloud-check icon #2612

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add cloud-check icon #2612

wants to merge 1 commit into from

Conversation

lscheibel
Copy link
Member

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

@github-actions github-actions bot added 🎨 icon About new icons 🫧 metadata Improved metadata labels Nov 14, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 14, 2024 •
edited
Loading

Added or changed icons

icons/cloud-check.svg

Preview cohesion icons/square-dashed-bottom-code.svg
icons/cloud-check.svg
icons/spline.svg
Preview stroke widths icons/cloud-check.svg
icons/cloud-check.svg
icons/cloud-check.svg
DPI Preview (24px) icons/cloud-check.svg
Icon X-rays icons/cloud-check.svg
Icon Diffs icons/cloud-check.svg
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
ericfennis previously approved these changes Nov 15, 2024
View reviewed changes
Copy link
Member

@ericfennis ericfennis left a comment

Choose a reason for hiding this comment

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

Nice work!

@jguddas
Copy link
Member

jguddas commented Nov 15, 2024

image

The cloud is shifted?

@lscheibel
Copy link
Member Author

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
Copy link
Member

jguddas commented Nov 16, 2024

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
Copy link
Member Author

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

@ericfennis ericfennis dismissed their stale review November 18, 2024 09:55

Should be aligned with other cloud icons.

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

@ericfennis ericfennis ericfennis left review comments

Assignees
No one assigned
Labels
🎨 icon About new icons 🫧 metadata Improved metadata
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Cloud with a check Icon Request: Cloud Checked Icon
3 participants
@lscheibel @jguddas @ericfennis