feat(icons): added list-filter-plus icon

[abdeniz]

What is the purpose of this pull request?

• New Icon

Description

Added new list-filter-plus icon.

Icon use case

Use cases:

• Adding column filters to a data table
• Adding advanced filters

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 # by @abdeniz
• I've based them on the following Lucide icons: list-filter, list-plus
• 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 ListFilterPlusIcon = createLucideIcon('ListFilterPlus', [
  ["path",{"d":"M10 18h4"}],
  ["path",{"d":"M11 6H3"}],
  ["path",{"d":"M15 6h6"}],
  ["path",{"d":"M18 9V3"}],
  ["path",{"d":"M7 12h8"}]
])

[karsa-mistmere]

I'm not really sold on this design, it kinda looks more like align-right-plus.

[jguddas]

With it in the top corner it's better.
There is a gap violation in this version now, needs to be at least 2px between the plus and top line.

[karsa-mistmere]

With it in the top corner it's better. There is a gap violation in this version now, needs to be at least 2px between the plus and top line.

Also, the plus itself is off grid.

[abdeniz]

I'm not really sold on this design, it kinda looks more like align-right-plus.

It does indeed, I believe moving the plus to the top line eliminates this confusion, although now it does differ from the list-plus icon's plus position. Could something like this work?

[karsa-mistmere]

I'm not really sold on this design, it kinda looks more like align-right-plus.

It does indeed, I believe moving the plus to the top line eliminates this confusion, although now it does differ from the list-plus icon's plus position. Could something like this work?

The design seems fine, but let's address Jakob's concern as well as mine about gaps and keeping lines pixel perfect.

[abdeniz]

Grid and gap fixes:

Open lucide studio

Edit: use studio embed instead of screenshots

[abdeniz]

I believe the middle line still has a gap violation, not exactly sure how the 2px gap violations are handled in a case like this where the gap is not direct between two elements

[abdeniz]

Fixed 2px gap violation on the middle line:

Open lucide studio

Edit: use studio embed instead of screenshot

[jguddas]

Fixed 2px gap violation on the middle line:

There is a share > copy GitHub embed, you don't have to paste the screenshot.

[abdeniz]

Hi @jguddas @karsa-mistmere, is there anything further I can work on or improve to get this considered?