fix(icons): fix volume icons, add volume-off

[karsa-mistmere]

What is the purpose of this pull request?

• New Icon
• Bug fix

Description

Our volume icons have pretty ugly corners (non-guideline-compliant, too sharp, too dense), this redesign brings the set much closer to what other icons in Lucide look like. Also added is a volume-off icon.

Icon use case

• volume-off: while volume-x can stand for volume being turned down to the absolute lowest, effectively being muted, volume-off is a much more straightforward mute/muted icon for various reasons:
  • more direct representation
  • more consistent with other icons such as wifi-off
  • reduced cognitive load
  • clearer message; some users may perceive x as there being some kind of error or problem
  • visual hierarchy; it places stronger emphasis on the action of muting

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 Lucide icons: volume

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

Icons as code

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

const VolumeOffIcon = createLucideIcon('VolumeOff', [
  ["path",{"d":"M16 9a5 5 0 0 1 .95 2.293"}],
  ["path",{"d":"M19.364 5.636a9 9 0 0 1 1.889 9.96"}],
  ["path",{"d":"m2 2 20 20"}],
  ["path",{"d":"m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11"}],
  ["path",{"d":"M9.828 4.172A.686.686 0 0 1 11 4.657v.686"}]
])

const FileVolumeIcon = createLucideIcon('FileVolume', [
  ["path",{"d":"M11 11a5 5 0 0 1 0 6"}],
  ["path",{"d":"M14 2v4a2 2 0 0 0 2 2h4"}],
  ["path",{"d":"M4 6.765V4a2 2 0 0 1 2-2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-.93-.23"}],
  ["path",{"d":"M7 10.51a.5.5 0 0 0-.826-.38l-1.893 1.628A1 1 0 0 1 3.63 12H2.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1.129a1 1 0 0 1 .652.242l1.893 1.63a.5.5 0 0 0 .826-.38z"}]
])

const Volume1Icon = createLucideIcon('Volume1', [
  ["path",{"d":"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"}],
  ["path",{"d":"M16 9a5 5 0 0 1 0 6"}]
])

const Volume2Icon = createLucideIcon('Volume2', [
  ["path",{"d":"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"}],
  ["path",{"d":"M16 9a5 5 0 0 1 0 6"}],
  ["path",{"d":"M19.364 18.364a9 9 0 0 0 0-12.728"}]
])

const VolumeXIcon = createLucideIcon('VolumeX', [
  ["path",{"d":"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"}],
  ["line",{"x1":"22","x2":"16","y1":"9","y2":"15"}],
  ["line",{"x1":"16","x2":"22","y1":"9","y2":"15"}]
])

const VolumeIcon = createLucideIcon('Volume', [
  ["path",{"d":"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"}]
])

[ericfennis]

Nicee