feat(icons): added 'panel-dashed' variants + update tags on existing icons #3500

irvineacosta · 2025-08-04T13:28:26Z

Description

Added new variants to the panel-dashed icon set:

panel-left-right-dashed
panel-top-right-dashed
panel-all-sides-dashed

Also updated the json files of existing icons to include:

margin
padding
guide

Icon use case

These icons will be used to represent paddings or margins, for example when customizing a UI element:

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 @
I've based them on the following Lucide icons: panel-dashed icon set (e.g. panel-top-dashed)
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.

…te tags on existing panel icons

github-actions

🤖 ChatGPT Tags suggestions ✨

I've asked ChatGPT for some suggestions for tags.

github-actions · 2025-08-04T13:29:07Z

icons/panel-all-sides-dashed.json

+    "ericfennis",
+    "irvineacosta"
+  ],
+  "tags": [


Suggestions for the panel-all-sides-dashed icon.
Try asking it your self if you want more suggestions. Open ChatGPT
Here are the suggestions:

Suggested change

"tags": [

"tags": [

"panel",

"sides",

"dashed",

"border",

"frame",

"outline",

"bordered",

"box",

"canvas",

"edge",

github-actions · 2025-08-04T13:29:07Z

icons/panel-bottom-dashed.json

@@ -2,13 +2,18 @@
  "$schema": "../icon.schema.json",
  "contributors": [
    "danielbayley",
-    "ericfennis"
+    "ericfennis",
+    "irvineacosta"
  ],
  "tags": [


Suggestions for the panel-bottom-dashed icon.
Try asking it your self if you want more suggestions. Open ChatGPT
Here are the suggestions:

Suggested change

"tags": [

"tags": [

"panel",

"bottom",

"dashed",

"line",

"border",

"underline",

"style",

"separator",

"glitch",

"bordered",

github-actions · 2025-08-04T13:29:08Z

icons/panel-left-dashed.json

@@ -2,14 +2,19 @@
  "$schema": "../icon.schema.json",
  "contributors": [
    "danielbayley",
-    "ericfennis"
+    "ericfennis",
+    "irvineacosta"
  ],
  "tags": [


Suggestions for the panel-left-dashed icon.
Try asking it your self if you want more suggestions. Open ChatGPT
Here are the suggestions:

Suggested change

"tags": [

"tags": [

"panel",

"left",

"dashed",

"border",

"outline",

"line",

"shape",

"graphic",

"design",

github-actions · 2025-08-04T13:29:08Z

icons/panel-left-right-dashed.json

+    "ericfennis",
+    "irvineacosta"
+  ],
+  "tags": [


Suggestions for the panel-left-right-dashed icon.
Try asking it your self if you want more suggestions. Open ChatGPT
Here are the suggestions:

Suggested change

"tags": [

"tags": [

"panel",

"left",

"right",

"dashed",

"border",

"line",

"divider",

"separator",

"split",

"section",

github-actions · 2025-08-04T13:29:08Z

icons/panel-right-dashed.json

@@ -2,14 +2,19 @@
  "$schema": "../icon.schema.json",
  "contributors": [
    "danielbayley",
-    "ericfennis"
+    "ericfennis",
+    "irvineacosta"
  ],
  "tags": [


Suggestions for the panel-right-dashed icon.
Try asking it your self if you want more suggestions. Open ChatGPT
Here are the suggestions:

Suggested change

"tags": [

"tags": [

"panel",

"right",

"dashed",

"border",

"outline",

"line",

"frame",

"edge",

"section",

github-actions · 2025-08-04T13:29:08Z

icons/panel-top-bottom-dashed.json

+    "ericfennis",
+    "irvineacosta"
+  ],
+  "tags": [


Suggestions for the panel-top-bottom-dashed icon.
Try asking it your self if you want more suggestions. Open ChatGPT
Here are the suggestions:

Suggested change

"tags": [

"tags": [

"panel",

"top",

"bottom",

"dashed",

github-actions · 2025-08-04T13:29:08Z

icons/panel-top-dashed.json

@@ -2,13 +2,18 @@
  "$schema": "../icon.schema.json",
  "contributors": [
    "danielbayley",
-    "ericfennis"
+    "ericfennis",
+    "irvineacosta"
  ],
  "tags": [


Suggestions for the panel-top-dashed icon.
Try asking it your self if you want more suggestions. Open ChatGPT
Here are the suggestions:

Suggested change

"tags": [

"tags": [

"panel",

"top",

"dashed",

"border",

"line",

"separator",

"style",

"graphic",

"design",

"outline",

github-actions · 2025-08-04T13:29:23Z

Added or changed icons

Preview cohesion

Preview stroke widths

DPI Preview

16px (shadcn/ui)

24px (default)

32px (shadcn/ui + retina)

48px (default + retina)

Icon X-rays

Icon Diffs

Icons as code

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

const PanelLeftRightDashedIcon = createLucideIcon('PanelLeftRightDashed', [
  ["path",{"d":"M16 10V9"}],
  ["path",{"d":"M16 15v-1"}],
  ["path",{"d":"M16 21v-2"}],
  ["path",{"d":"M16 5V3"}],
  ["path",{"d":"M8 10V9"}],
  ["path",{"d":"M8 15v-1"}],
  ["path",{"d":"M8 21v-2"}],
  ["path",{"d":"M8 5V3"}],
  ["rect",{"x":"3","y":"3","width":"18","height":"18","rx":"2"}]
])

const PanelTopBottomDashedIcon = createLucideIcon('PanelTopBottomDashed', [
  ["path",{"d":"M14 16h1"}],
  ["path",{"d":"M14 8h1"}],
  ["path",{"d":"M19 16h2"}],
  ["path",{"d":"M19 8h2"}],
  ["path",{"d":"M3 16h2"}],
  ["path",{"d":"M3 8h2"}],
  ["path",{"d":"M9 16h1"}],
  ["path",{"d":"M9 8h1"}],
  ["rect",{"x":"3","y":"3","width":"18","height":"18","rx":"2"}]
])

irvineacosta · 2025-08-04T13:32:00Z

@karsa-mistmere @jguddas as discussed here's the PR that expands the existing panel-dashed icons 😁

jguddas · 2025-08-04T13:40:25Z

You should not duplicate icons that are just rotated versions of other icons.
panel-all-sides-dashed does not look like panels, I would go with feat(icons): added square-square-dashed icon #3499 instead.

In short: I would remove all icons besides panel-left-right-dashed.

karsa-mistmere · 2025-08-04T13:42:04Z

You should not duplicate icons that are just rotated versions of other icons.

Please don't state this as fact, we should postpone merging orientations, as we are in no way ready for handling the automation of mirrored and rotated variants.

Forcing people to use CSS transforms is not an option, since browsers (and HTML in general) are not our only target.

irvineacosta · 2025-08-04T15:04:19Z

You should not duplicate icons that are just rotated versions of other icons.

Please don't state this as fact, we should postpone merging orientations, as we are in no way ready for handling the automation of mirrored and rotated variants.

Forcing people to use CSS transforms is not an option, since browsers (and HTML in general) are not our only target.

@jguddas it's also not possible to rotate instances inside figma components without detaching them.

jguddas · 2025-08-04T21:16:03Z

You should not duplicate icons that are just rotated versions of other icons.

Please don't state this as fact, we should postpone merging orientations, as we are in no way ready for handling the automation of mirrored and rotated variants.

Forcing people to use CSS transforms is not an option, since browsers (and HTML in general) are not our only target.

@jguddas it's also not possible to rotate instances inside figma components without detaching them.

I changed my mind, I think it's good as long as they have a unique use case.

feat(icons): add panel-{top-bottom,left-right,all-sides}-dashed; upda…

b2cf01e

…te tags on existing panel icons

github-actions bot added 🎨 icon About new icons 🫧 metadata Improved metadata labels Aug 4, 2025

github-actions bot reviewed Aug 4, 2025

View reviewed changes

vercel bot deployed to Preview August 4, 2025 13:45 View deployment

irvineacosta mentioned this pull request Aug 4, 2025

feat(icons): added square-square-dashed icon #3499

Open

19 tasks

removed the all-sides variant

56c08aa

vercel bot deployed to Preview August 4, 2025 14:08 View deployment

jguddas approved these changes Aug 4, 2025

View reviewed changes

-  "tags": [
+  "tags": [
+    "panel",
+    "sides",
+    "dashed",
+    "border",
+    "frame",
+    "outline",
+    "bordered",
+    "box",
+    "canvas",
+    "edge",

Uh oh!

feat(icons): added 'panel-dashed' variants + update tags on existing icons #3500

Are you sure you want to change the base?

feat(icons): added 'panel-dashed' variants + update tags on existing icons #3500

Conversation

irvineacosta commented Aug 4, 2025

Description

Icon use case

Alternative icon designs

Icon Design Checklist

Concept

Author, credits & license

Naming

Design

Before Submitting

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

🤖 ChatGPT Tags suggestions ✨

Uh oh!

github-actions bot Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Aug 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Added or changed icons

16px (shadcn/ui)

24px (default)

32px (shadcn/ui + retina)

48px (default + retina)

Uh oh!

irvineacosta commented Aug 4, 2025

Uh oh!

jguddas commented Aug 4, 2025

Uh oh!

karsa-mistmere commented Aug 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

irvineacosta commented Aug 4, 2025

Uh oh!

jguddas commented Aug 4, 2025

Uh oh!

Uh oh!

github-actions bot commented Aug 4, 2025 •

edited

Loading

karsa-mistmere commented Aug 4, 2025 •

edited

Loading