feat(icons): added rose icon

[jguddas]

What is the purpose of this pull request?

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

Description

This comes from the lab branch.

Icon use case

Anything and everything romantic, i.e. Valentine's Day.

Alternative icon designs

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 Add flora icons #1398 by @danielbayley
• I've based them on the following Lucide icons:
• 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 two 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 RoseIcon = createLucideIcon('Rose', [
  ["path",{"d":"M13 20s-5 3-9.2-2c0 0 5.2-3 9.2 2"}],
  ["path",{"d":"M17 10h-1a4 4 0 1 1 4-4v.534"}],
  ["path",{"d":"M17 6h1a4 4 0 0 1 1.42 7.74l-2.29.87a6 6 0 0 1-5.339-10.68l2.069-1.31"}],
  ["path",{"d":"M9.77 12C4 15 2 22 2 22"}],
  ["circle",{"cx":"17","cy":"8","r":"2"}]
])

[karsa-mistmere]

The smallest circle would need to be on the grid for it to be crisp, also, the bottom right path feels a bit wonky:

[karsa-mistmere]

A bit more geometric redesign that's crisper at 1x:

Open lucide studio

[jguddas]

This corner feels worse

[karsa-mistmere]

Yeah, I guess, you're right. I can fix it, but we'll need cubic curves:

Open lucide studio

[jguddas]

I feel like the reduced roundness of @danielbayley version better.

[jguddas]

I feel like the leaf is a bit off-kilter.

Maybe we can steal something from https://lucide.dev/icons/sprout

[karsa-mistmere]

I feel like the leaf is a bit off-kilter.

Maybe we can steal something from https://lucide.dev/icons/sprout

Maybe, the generic shape is OK, but pixel perfection would need to be improved.

[jguddas]

I feel like the leaf is a bit off-kilter.
Maybe we can steal something from https://lucide.dev/icons/sprout

Maybe, the generic shape is OK, but pixel perfection would need to be improved.

Do you mean for better sharpness?

I actually feel like your admittedly sharper version feels harsh and reduces the soft feel which I like.

[karsa-mistmere]

Do you mean for better sharpness?

I actually feel like your admittedly sharper version feels harsh and reduces the soft feel which I like.

Yeah, tastes aside, we have "I've made sure that the icons look sharp on low DPI displays" in our PR checklist for a reason, I actually recall it was in fact none other but yourself who wrote this one. 😄

[jguddas]

Do you mean for better sharpness?
I actually feel like your admittedly sharper version feels harsh and reduces the soft feel which I like.

Yeah, tastes aside, we have "I've made sure that the icons look sharp on low DPI displays" in our PR checklist for a reason, I actually recall it was in fact none other but yourself who wrote this one. 😄

Fair enough.

If you center the center and keep the outer parts, they are not centered on the grid tho.

Open lucide studio

[karsa-mistmere]

If you center the center and keep the outer parts, they are not centered on the grid tho.

I'm not sure what point you're trying to make here, these paths are from your original design, aren't they?
Yeah, that's the whole reason I did the redesign.

[danielbayley]

Icon use case

Anything and everything romantic, i.e. Valentine's Day.

Yeah I was playing around with an animated version for something related, at the time.

There is also rose-2, to match flower-2, which maybe should be included here?

---

Maybe we can steal something from https://lucide.dev/icons/sprout

@jguddas Sure, it was of course already based on leaves from existing floral icons sprout and flower-2…

---

the reduced roundness of @danielbayley version

Yeah, I think bloating it like that distorts the elegant appearance of a rose.

---

If you center the center and keep the outer parts, they are not centered on the grid tho.

@jguddas @karsa-mistmere I would have ran it though the optimisation step, which although a very useful tool, was sometimes nudging things slightly off-grid… But for reference, here are the grid-aligned circles it was based on, when I originally designed it in Illustrator: Lucide Studio link…

[karsa-mistmere]

Unfortunately the smallest circle is off grid, hence @jguddas's little red marker:

[danielbayley]

Unfortunately the smallest circle is off grid, hence @jguddas's little red marker

Nice feature, but yes exactly .5 off… Is that not allowed?

[jguddas]

Unfortunately the smallest circle is off grid, hence @jguddas's little red marker

Nice feature, but yes exactly .5 off… Is that not allowed?

If you have are .5 off you will fill the pixel to only 50% which will look not so sharp.

We could make the center circle smaller, than it's more than 50% there.

Open lucide studio

[danielbayley]

@jguddas @karsa-mistmere We could do like this…

[jguddas]

@jguddas @karsa-mistmere We could do like this…

Having the circle at 1.75 radius still means we have a pixel that is 25% filled.

[jguddas]

I think this is the best of all the versions so far, which is just the current suggestion with the center of the circle snapped.

Open lucide studio

[karsa-mistmere]

I think this is the best of all the versions so far, which is just the current suggestion with the center of the circle snapped.

I disagree, the 8px circles are also super blurry at 1px and would need to alight to the grid more:

[karsa-mistmere]

I think this is the best of all the versions so far, which is just the current suggestion with the center of the circle snapped.

I disagree, the 8px circles are also super blurry at 1px and would need to alight to the grid more:

And again thin or not (although I'd very much prefer a rounder real rose to a plastic one), this wobbly path would need to be fixed:

[danielbayley]

I think this is the best of all the versions so far, which is just the current suggestion with the center of the circle snapped.

I disagree, the 8px circles are also super blurry at 1px and would need to alight to the grid more

@karsa-mistmere @jguddas How about this?

As an aside, it would be super useful if we could upgrade ‘Studio’ to also (asynchronously) generate the relevant previews at various stroke-widths, and 100% scale pixel preview… Along with the ability to add temporary ‘guide’ layers (maybe with a .guide class or something) that aren’t forced to render at 2px stroke-width, and with a contrasting colour…

[github-actions]

This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[jguddas]

I think the current state of the pr looks sharp enough to merge.

[jamiemlaw]

Open lucide studio

With the aid of a couple of horizontal/vertical lines to bridge the gaps, this version has all of the arcs be grid-aligned.