feat(icons): added chess pieces

[karsa-mistmere]

closes #1865

What is the purpose of this pull request?

• [x] New Icon

Description

Adds chess pieces as per #1865

Icon use case

As provided in #1865:

1. Chess-related applications
2. Chess-related educational materials
3. Chess-related branding/merchandise
4. Algebraic notation (with symbols instead of letters)

Alternative icon designs

Also see #1865

There's also a more minimal set that could match the crown redesign in #1947: I'm not sure the rest of the icons work particularly well with the bottom line, and crown doesn't work particularly well without it.

Icon Design Checklist

Concept

• [x] I have provided valid use cases for each icon.
• [x] I have not added any a brand or logo icon.
• [x] I have not used any hate symbols.
• [x] I have not included any religious or political imagery.

Author, credits & license

• [x] The icons are solely my own creation.

Naming

• [x] I've read and followed the naming conventions
• [x] I've named icons by what they are rather than their use case.
• [x] I've provided meta JSON files in icons/[iconName].json.

Design

• [x] I've read and followed the icon design guidelines
• [x] I've made sure that the icons look sharp on low DPI displays.
• [x] I've made sure that the icons look consistent with the icon set in size, optical volume and density.
• [x] I've made sure that the icons are visually centered.
• [x] I've correctly optimized all icons to two points of precision.

Before Submitting

• [x] I've read the Contribution Guidelines.
• [x] I've checked if there was an existing PR that solves the same issue.

[github-actions[bot]]

Added or changed icons

Preview cohesion

Preview stroke widths

DPI Preview (24px)

Icon X-rays

Icons as code

Works for: lucide-react, lucide-react-native, lucide-preact, lucide-vue-next

const ChessBishopIcon = createLucideIcon('ChessBishop', [
  ["path",{"d":"M5 21a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3 1 1 0 0 1-1 1H6a1 1 0 0 1-1-1"}],
  ["path",{"d":"M15 18c1.5-.615 3-2.461 3-4.923C18 8.769 14.5 4.462 12 2 9.5 4.462 6 8.77 6 13.077 6 15.539 7.5 17.385 9 18"}],
  ["path",{"d":"m16 7-2.5 2.5"}],
  ["path",{"d":"M9 2h6"}]
])

const ChessKingIcon = createLucideIcon('ChessKing', [
  ["path",{"d":"M4 21a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3 1 1 0 0 1-1 1H5a1 1 0 0 1-1-1"}],
  ["path",{"d":"m6.7 18-1-1C4.35 15.682 3 14.09 3 12a5 5 0 0 1 4.95-5c1.584 0 2.7.455 4.05 1.818C13.35 7.455 14.466 7 16.05 7A5 5 0 0 1 21 12c0 2.082-1.359 3.673-2.7 5l-1 1"}],
  ["path",{"d":"M10 4h4"}],
  ["path",{"d":"M12 2v6.818"}]
])

const ChessKnightIcon = createLucideIcon('ChessKnight', [
  ["path",{"d":"M4 21a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3 1 1 0 0 1-1 1H5a1 1 0 0 1-1-1"}],
  ["path",{"d":"M16.5 18c1-2 2.5-5 2.5-9a7 7 0 0 0-7-7H6.635a1 1 0 0 0-.768 1.64L7 5l-2.32 5.802a2 2 0 0 0 .95 2.526l2.87 1.456"}],
  ["path",{"d":"m15 5 1.425-1.425"}],
  ["path",{"d":"m17 8 1.53-1.53"}],
  ["path",{"d":"M9.713 12.185 7 18"}]
])

const ChessPawnIcon = createLucideIcon('ChessPawn', [
  ["path",{"d":"M5 21a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3 1 1 0 0 1-1 1H6a1 1 0 0 1-1-1"}],
  ["path",{"d":"m14.5 10 1.5 8"}],
  ["path",{"d":"M7 10h10"}],
  ["path",{"d":"m8 18 1.5-8"}],
  ["circle",{"cx":"12","cy":"6","r":"4"}]
])

const ChessQueenIcon = createLucideIcon('ChessQueen', [
  ["path",{"d":"M5 22a1 1 0 0 1-1-1 3 3 0 0 1 3-3h10a3 3 0 0 1 3 3 1 1 0 0 1-1 1z"}],
  ["path",{"d":"M7 18 4 9l4.074 2.444a1 1 0 0 0 1.409-.41L12 6l2.517 5.034a1 1 0 0 0 1.409.41L20 9l-3 9"}],
  ["circle",{"cx":"12","cy":"4","r":"2"}],
  ["circle",{"cx":"20","cy":"7","r":"2"}],
  ["circle",{"cx":"4","cy":"7","r":"2"}]
])

const ChessRookIcon = createLucideIcon('ChessRook', [
  ["path",{"d":"M5 22a1 1 0 0 1-1-1 3 3 0 0 1 3-3h10a3 3 0 0 1 3 3 1 1 0 0 1-1 1z"}],
  ["path",{"d":"M10 2v2"}],
  ["path",{"d":"M14 2v2"}],
  ["path",{"d":"m17 18-1-9a2 2 0 0 0 2-2V2"}],
  ["path",{"d":"M6 5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1"}],
  ["path",{"d":"m7 18 1-9a2 2 0 0 1-2-2V2"}],
  ["path",{"d":"M8 9h8"}]
])

[jguddas]

The pawn icon feels bigger than the rest to me.

[karsa-mistmere]

The pawn icon feels bigger than the rest to me.

I see what you mean. We could shrink it down by 1 or 2pxs in height, but it would either not be vertically centered anymore or its base would not be aligned with the rest of the icons:

Sidenote: in the official unicode chart, pawn is also quite large

[ericfennis]

Hmm, I think I prefer the minimal design approach, where we use these icons for more use-cases. One crown icon in the set would be great. Also the tower icon can have more use cases like: "A castle or monument POI's on maps".

I think you bottom design with bottom line is not that bad. It also matches the landmark icon

[karsa-mistmere]

Hmm, I think I prefer the minimal design approach, where we use these icons for more use-cases. One crown icon in the set would be great. Also the tower icon can have more use cases like: "A castle or monument POI's on maps".

I think you bottom design with bottom line is not that bad. It also matches the landmark icon

I do see merit in the minimal set, but the concerns raised would need to be addressed; crown looks fine as it is, but some of the others don't really work that well when following crown's formula, including some of our existing icons the non-minimal set was based on, which would kind of stick out should we go minimal, and I'm less than enthusiastic about changing these (concierge-bell is okay, the others are very meh):

[jguddas]

I think the minimal is nice but not lucide-y

[ericfennis]

@karsa-mistmere You are right. The first row looks the best. But it would be nice if icons had multiple use cases. So not having two crown icons.

[github-actions[bot]]

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.

[spacedawwwg]

These icons look mint

[karsa-mistmere]

Request for multipurpose icons, and reuse/redesign for example the crown icon. Tower piece is also great for landmarks on maps.

@ericfennis: To be honest, I'm against this approach because of the following reason: chess pieces need to have a base, otherwise they do not look like chess pieces anymore.

On the other hand, similarly shaped stuff with completely different use cases do not require a base (I'd even wager that a base is pretty much always a distraction), for example, this is what an actual tower icon would likely look like following the precedent of previous building icons (fort for comparison):

None one of these truly looks like a chess rook, and neither do either of the chess rook proposals look particularly tower-like because of the base:

As far as I'm concerned, if we want chess piece icons, we should have chess piece icons.

If we want something else (crown, tower, horse, mitre etc.), we should add those as their own entity, but crown≠king, tower≠rook, horse≠knight, mitre≠bishop.