feat(icons): added layers-plus icon
#3367
Conversation
fix: updated contributors to reflect actual author
|
Thanks for reviewing this contribution! Let me know if there’s anything I should improve. |
Added or changed iconsPreview cohesion   Preview stroke widths  DPI Preview16px (shadcn/ui)
24px (default)
32px (shadcn/ui + retina)
48px (default + retina)
Icon X-rays
Icon Diffs
Icons as codeWorks for: const LayersPlusIcon = createLucideIcon('LayersPlus', [
["path",{"d":"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 .83.18 2 2 0 0 0 .83-.18l8.58-3.9a1 1 0 0 0 0-1.831z"}],
["path",{"d":"M16 17h6"}],
["path",{"d":"M19 14v6"}],
["path",{"d":"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 .825.178"}],
["path",{"d":"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l2.116-.962"}]
]) |
There was a problem hiding this comment.
Hi @juanisidoro,
The plus itself is too small, we normally use a 6by6 or 8by8 plus sign in these scenarios.
The icon also has gap guideline violations next to the plus sign:
|
Hi @karsa-mistmere, Thanks again for your time and support! |
|
Hi @karsa-mistmere, I've just updated the icon and pushed the fix 🚀 For consistency, I used the plus symbol from the Let me know if there’s anything else you'd recommend! Thanks again for the feedback and support 🙌 |
icons/layers-plus.svg
Outdated
| <path d="M 16 16.5 L 22 16.5" /> | ||
| <path d="M 19 13.5 L 19 19.5" /> |
There was a problem hiding this comment.
The plus is now off-grid, resulting in blurry lines:
|
Hi @karsa-mistmere, I’ve just pushed a fix that adjusts the alignment and slope of the plus sign. It should now be properly on-grid to avoid the blurry rendering issue. My apologies for the back and forth — this is actually my first time contributing to an open source project, so I'm still getting used to the workflow. Really appreciate your patience and the guidance throughout 🙏 If there’s anything else that needs improvement, I’m on it! |
icons/layers-plus.svg
Outdated
| > | ||
| <path d="M 11.18 21.82 A2 2 0 0 0 12.83 21.82" /> | ||
| <path d="M 12.83 21.82 L 15 20.5" /> | ||
| <path d="M 12.83 21.82 L 15 20.83" /> |
There was a problem hiding this comment.
Still off-grid, I'm afraid. And the gaps are now too large.
Here's an optimized version:
|
Thanks so much @karsa-mistmere! 🙏 Let me know if there's anything else! ^^ |
juanisidoro
force-pushed
the
studio/layers-plus
branch
from
20125d0 to
bdae3fb
Compare
ericfennis
left a comment
ericfennis
left a comment
There was a problem hiding this comment.
Nice looks good!
Maybe we should also add layers-minus (in a separate PR).
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
* Added icons/layers-plus.svg * Added icons/layers-plus.json * Update layers-plus.json fix: updated contributors to reflect actual author * fix(icon): update layers-plus icon to follow size and spacing guidelines * fix(icon): adjust layers-plus plus sign alignment and slope * fix(icon): apply optimized version from reviewer to align on grid and spacing * chore: add karsa-mistmere as contributor --------- Co-authored-by: Eric Fennis <[email protected]>
3 participants
What is the purpose of this pull request?
Description
Added new
layers-plusicon.Icon use case
The
layers-plusicon represents the action of adding a new layer, stacked item, or grouped variation in a UI context. It was originally designed for use in an eCommerce application to let users add product variations — but it can be applied to any situation where elements are layered, grouped, or duplicated dynamically.This icon is ideal for:
It is based on the existing
layersicon, with a visually integrated plus symbol to clearly communicate an addition or creation action.Alternative icon designs
Icon Design Checklist
Concept
Author, credits & license
layers,plusNaming
icons/[iconName].json.Design
Before Submitting