feat(icons): add eye-closed icon

[karsa-mistmere]

What is the purpose of this pull request?

• New Icon

Description

Adds an icon depicting an eye that is closed (not crossed off).

Icon use case

1. Privacy Mode

   • Indicate that privacy mode is activated.

2. Sleep Mode

   • Represent a device or application in sleep mode.

3. Do Not Disturb

   • Show that notifications or alerts are muted.

4. Hidden Content

   • Mark content that is hidden or needs to be revealed.

5. Inactive Status

   • Denote that a user is inactive or away.

6. Muted Video

   • Indicate that a video feed is turned off.

7. Stealth Mode

   • Represent a feature that operates in stealth or hidden mode.

8. Accessibility Feature

   • Indicate an accessibility option for users with visual impairments.

9. Mindfulness/Relaxation

   • Represent a feature or content related to mindfulness or relaxation exercises.

10. Vision Test

    • Use in applications or contexts involving eye health or vision tests.

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.
• I've "based" them on the following design: eye (not so much based, but designed in a way they would match)

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 EyeClosedIcon = createLucideIcon('EyeClosed', [
  ["path",{"d":"m15 18-.722-3.25"}],
  ["path",{"d":"M2 8a10.645 10.645 0 0 0 20 0"}],
  ["path",{"d":"m20 15-1.726-2.05"}],
  ["path",{"d":"m4 15 1.726-2.05"}],
  ["path",{"d":"m9 18 .722-3.25"}]
])

[ericfennis]

@karsa-mistmere Nice icon, I like it.
Looking at the X-ray, it is a bit shifted relative to the eye icon. When using this for example to show/hide something you see it feels like it shifting a bit.

Not sure if this is intended, I've create a quick demo to demonstrate this.

[karsa-mistmere]

@karsa-mistmere Nice icon, I like it. Looking at the X-ray, it is a bit shifted relative to the eye icon. When using this for example to show/hide something you see it feels like it shifting a bit.

Not sure if this is intended, I've create a quick demo to demonstrate this.

The codesandbox isn't public.

[ericfennis]

Sorry, forgot to make it public, here ya go

[karsa-mistmere]

@ericfennis: Yeah, I see what you mean. What about moving it 1px downwards?

The switch does feel much better, although vertical centering is a bit off.

[ericfennis]

@karsa-mistmere Agreed. And overlapping it exactly with eye icon makes the icon not vertically centered right? In that case I think the 1px shift downwards is the best we can do.