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 1v2a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-9a2 2 0 0 0-1-1.73"}],
  ["path",{"d":"M4 15.73A2 2 0 0 1 3 14V5a2 2 0 0 1 2-2h9a2 2 0 0 1 1.998 2L16 7a1 1 0 0 1-1 1h-5a2 2 0 0 0-2 2v2"}]
])

const SquaresIntersectIcon = createLucideIcon('SquaresIntersect', [
  ["path",{"d":"M15 21h-1"}],
  ["path",{"d":"M15.733 4A2 2 0 0 0 14 3"}],
  ["path",{"d":"M21 14v1"}],
  ["path",{"d":"M21 19a2 2 0 0 1-2 2"}],
  ["path",{"d":"M21 9.995a2 2 0 0 0-1-1.727"}],
  ["path",{"d":"M3 10V9"}],
  ["path",{"d":"M3 5a2 2 0 0 1 2-2"}],
  ["path",{"d":"M4 15.737A2 2 0 0 1 3 14"}],
  ["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":"M9 3h1"}],
  ["path",{"d":"M9.995 21a2 2 0 0 1-1.727-1"}]
])

const SquaresSubtractIcon = createLucideIcon('SquaresSubtract', [
  ["path",{"d":"M10 21a2 2 0 0 1-1.732-1"}],
  ["path",{"d":"M15 21h-1"}],
  ["path",{"d":"M15 8a1 1 0 0 0 1-1V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h2a1 1 0 0 0 1-1v-5a2 2 0 0 1 2-2z"}],
  ["path",{"d":"M21 10a2 2 0 0 0-1-1.731"}],
  ["path",{"d":"M21 14v1"}],
  ["path",{"d":"M21 19a2 2 0 0 1-2 2"}]
])

const SquaresUniteIcon = createLucideIcon('SquaresUnite', [
  ["path",{"d":"M8 19a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-2a1 1 0 0 1-1-1V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h2a1 1 0 0 1 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

[EthanHazel]

As of now I feel like everything for these icons is in order so I don't think there will be any more changes unless there's issues that cause any conflicts (which shouldn't happen but never say never).

[jguddas]

Another variant for squares-exclude based on @jamiemlaw s revision.

Open lucide studio

[EthanHazel]

Another variant for squares-exclude based on @jamiemlaw s revision.

Open lucide studio

I honestly really like this design too, I can't figure out which one I like more so I'll go ask around and see what people think they like better.

[EthanHazel]

I asked around and the new design seemed to be more well liked so I went ahead and committed it. I went ahead and added the old design to the alt icons.

[ericfennis]

Really well executed. Well done @EthanHazel !