add headphone-off svg & json in icon folder

[Need-an-AwP]

What is the purpose of this pull request?

• New Icon
• Bug fix
• New Feature
• Documentation update
• Other:

Description

this headphone-off icon is based on headphone icon and mic-off icon
I followed the design style of the mic-off icon and modified the headphone icon with figma
i cannot run any build, optimize or test script on my pc, i always have different errors on running them
this change is committed with --no-verify

Icon use case

just like mic-off icon, headphone-off icon can be use to show audio output muted

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: headphone, mic-off
• 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 HeadphoneOffIcon = createLucideIcon('HeadphoneOff', [
  ["path",{"d":"M21 14h-1.343"}],
  ["path",{"d":"M9.128 3.47A9 9 0 0 1 21 12v3.343"}],
  ["path",{"d":"m2 2 20 20"}],
  ["path",{"d":"M20.414 20.414A2 2 0 0 1 19 21h-1a2 2 0 0 1-2-2v-3"}],
  ["path",{"d":"M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 2.636-6.364"}]
])

[karsa-mistmere]

Hi @Need-an-AwP,

Please split the path up into its separate parts, as some renderers end up with funky paths if they are merged.

The icon is mostly well designed, but the bottom parts need a larger gap between the diagonal line and the headphone (2px to be precise).

[Need-an-AwP]

@karsa-mistmere
i adjusted that diagonal line and it is exactly the same as mic-off icon's diagonal line
i also seperated the path 😎

[karsa-mistmere]

This gap is still smaller than 2px.

[Need-an-AwP]

adjust the gap this time and seems like some automatic process went wrong

[karsa-mistmere]

Sorry, evidently I wasn't clear enough: you should only have broken the path up into its elements, not separate path segments, e.g.:

Here's a fully optimized version with exactly 2px gaps:

Open lucide studio

[Need-an-AwP]

@karsa-mistmere
the original headphone icon use exactly the same path segments in headphone part

[karsa-mistmere]

@karsa-mistmere the original headphone icon use exactly the same path segments in headphone part

Again, it's not the segments, it's just that we do not allow combined paths, as they can be rendered funky in Figma for example. Every path should be a single path made up of any number and type of segments between two points, your original file had only two paths, one for the line, one for everything else. While the original headphone shape is a single line, this one is made up of four distinct paths.

[Need-an-AwP]

@karsa-mistmere i rewrote each path, is this change ok?😥

[karsa-mistmere]

@karsa-mistmere i rewrote each path, is this change ok?😥

Not quite, but it's close:

• it would be better to keep the gap at exactly 2px (see above)
• it would also be better not to duplicate segments and just add that extra bit of line as a separate path

[jguddas]

@karsa-mistmere i rewrote each path, is this change ok?😥

Not quite, but it's close:

• it would be better to keep the gap at exactly 2px (see above)
• it would also be better not to duplicate segments and just add that extra bit of line as a separate path

Lucide studio has a tidy button that does that for you.

[karsa-mistmere]

Lucide studio has a tidy button that does that for you.

It won't close the gaps that are too large though.

[Need-an-AwP]

@karsa-mistmere is this gap enough

[karsa-mistmere]

You can check via the icon x-rays if the gap is ideal, these lines should touch but not intersect:

---

I see you're using Figma, my modus operandi for creating perfect gaps is as follows:

1. I first clone the diagonal line as a 8px stroke (that will make it 4px on each side)

---

2. I convert it to an outline:

---

3. I select and cut the highlighted line that now defines the 4px offset (2px gap + 1px from each 2px stroke line):

---

4. I paste this line into the path while editing:

---

5. Add intersection points where needed:

---

6. Then delete the clutter:

---

7. Paste the copied SVG into Lucide Studio...

---

8. ...and click Tidy:

Ta-da! 🥳

[Need-an-AwP]

thank u for the tutorial with a lot details, i used the method u provide redraw the icon and adjusted my svg code

[ericfennis]

Excellent help over here!

I've one small comment for the meta file

[ericfennis]

Nice work @Need-an-AwP !