feat(icons): added squares-* operation icons

[EthanHazel]

What is the purpose of this pull request?

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

Description

Icon use case

Icons are built for use with programs that use vector tools like the pathfinder tool (tasks like combining, dividing, and trimming shapes)

Alternative icon designs

Alternate intersect

Alternate minus

Alternate Exclude 1

Alternate Exclude 2

Alternate Exclude 3

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 # by @
• 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 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 SquaresExcludeIcon = createLucideIcon('SquaresExclude', [
  ["path",{"d":"M16 12v2a2 2 0 0 1-2 2H9a1 1 0 0 0-1 1v3a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2h0"}],
  ["path",{"d":"M4 16a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3a1 1 0 0 1-1 1h-5a2 2 0 0 0-2 2v2"}]
])

const SquaresIntersectIcon = createLucideIcon('SquaresIntersect', [
  ["path",{"d":"M10 22a2 2 0 0 1-2-2"}],
  ["path",{"d":"M14 2a2 2 0 0 1 2 2"}],
  ["path",{"d":"M16 22h-2"}],
  ["path",{"d":"M2 10V8"}],
  ["path",{"d":"M2 4a2 2 0 0 1 2-2"}],
  ["path",{"d":"M20 8a2 2 0 0 1 2 2"}],
  ["path",{"d":"M22 14v2"}],
  ["path",{"d":"M22 20a2 2 0 0 1-2 2"}],
  ["path",{"d":"M4 16a2 2 0 0 1-2-2"}],
  ["path",{"d":"M8 10a2 2 0 0 1 2-2h5a1 1 0 0 1 1 1v5a2 2 0 0 1-2 2H9a1 1 0 0 1-1-1z"}],
  ["path",{"d":"M8 2h2"}]
])

const SquaresSubtractIcon = createLucideIcon('SquaresSubtract', [
  ["path",{"d":"M10 22a2 2 0 0 1-2-2"}],
  ["path",{"d":"M16 22h-2"}],
  ["path",{"d":"M16 4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-5a2 2 0 0 1 2-2h5a1 1 0 0 0 1-1z"}],
  ["path",{"d":"M20 8a2 2 0 0 1 2 2"}],
  ["path",{"d":"M22 14v2"}],
  ["path",{"d":"M22 20a2 2 0 0 1-2 2"}]
])

const SquaresUniteIcon = createLucideIcon('SquaresUnite', [
  ["path",{"d":"M4 16a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3a1 1 0 0 0 1 1h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2v-3a1 1 0 0 0-1-1z"}]
])

[jguddas]

I also think it should be squares-something.

[jamiemlaw]

Ultimately, really like these. I had a go at some designs a while back that all kind-of worked, but I think you've pretty much nailed it.

Two rather trivial matters:

• I'd consider renaming squares-subtraction to squares-subtract to use the same naming convention as unite, intersect and exclude.
• Some other potential keywords to add would be boolean and set.

But something else I noticed: at a distance, or when pixellated, the exclude icon reads to me like the unite icon but with diagonal lines in the squares.

Not sure if something like these would work better at low res?

Open lucide studio

Open lucide studio

[EthanHazel]

Ultimately, really like these. I had a go at some designs a while back that all kind-of worked, but I think you've pretty much nailed it.

Two rather trivial matters:

• I'd consider renaming squares-subtraction to squares-subtract to use the same naming convention as unite, intersect and exclude.
• Some other potential keywords to add would be boolean and set.

But something else I noticed: at a distance, or when pixellated, the exclude icon reads to me like the unite icon but with diagonal lines in the squares.

Not sure if something like these would work better at low res?

Open lucide studio

Open lucide studio

These honestly look much better, I like the second one more imo but I'll add the other one to the alternate designs so if people end up preferring that one more I'll switch it out

[ericfennis]

Really well executed. Well done @EthanHazel !

[karsa-mistmere]

These feel a bit too small for me, I think the optical volume is too far off square and circle, for me the bottom row feels much more balanced, not to mention more in line with our copy icons:

[EthanHazel]

The redesigns you made look good, if you'd want I can commit those to the branch if you can link lucide studio

[EthanHazel]

These feel a bit too small for me, I think the optical volume is too far off square and circle, for me the bottom row feels much more balanced, not to mention more in line with our copy icons:

Just went ahead and remade the icons you just sent and committed them! I added you as a contributor to all the icons. Let me know if there were any issues 👍

[karsa-mistmere]

These feel a bit too small for me, I think the optical volume is too far off square and circle, for me the bottom row feels much more balanced, not to mention more in line with our copy icons:

Just went ahead and remade the icons you just sent and committed them! I added you as a contributor to all the icons. Let me know if there were any issues 👍

Great work, one final thing is that I think the highlighted corners would maybe make more sense with 1px radii, similar to intersect having distinct corners:

[karsa-mistmere]

These feel a bit too small for me, I think the optical volume is too far off square and circle, for me the bottom row feels much more balanced, not to mention more in line with our copy icons:

Just went ahead and remade the icons you just sent and committed them! I added you as a contributor to all the icons. Let me know if there were any issues 👍

Great work, one final thing is that I think the highlighted corners would maybe make more sense with 1px radii, similar to intersect having distinct corners:

Open lucide studio

[EthanHazel]

@karsa-mistmere Just implemented your icon, I fixed an issue though where the left square was offset by a pixel. Should be all good now 👍