feat(icons): added bullhorn icon

[jamiemlaw]

closes #2438

What is the purpose of this pull request?

• New Icon
• Other: Icon Update

Description

1. Added a megaphone variant, bullhorn that depicts an electric megaphone
2. Rounded the corners of the current megaphone icon and increased the gap inside the handle to better match Lucide's current guidelines
3. Updated the metadata to include loudspeaker as a keyword for users searching for that term

This PR is in response to #2438, requesting an electric megaphone. Lucide already has a megaphone icon, but it shows an acoustic megaphone. Those two different types of megaphone can have different connotations, acoustic being used for announcements but electric for crowd control. Therefore it seemed like a breaking change to change the style from one to the other.

Therefore, I have added the electric megaphone as a new icon, bullhorn, (name justification) but made sure to add megaphone as a tag, so it will show up in those searches.

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:
• 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 MegaphoneOffIcon = createLucideIcon('MegaphoneOff', [
  ["path",{"d":"M10.657 5H11a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 3v12.343"}],
  ["path",{"d":"M13 13H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2"}],
  ["path",{"d":"m2 2 20 20"}],
  ["path",{"d":"M6 13a12 12 0 0 0 2.4 7.2 2 2 0 1 0 3.2-2.4A8 8 0 0 1 10 13"}],
  ["path",{"d":"M8 8v5"}]
])

const MegaphoneIcon = createLucideIcon('Megaphone', [
  ["path",{"d":"M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"}],
  ["path",{"d":"M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14"}],
  ["path",{"d":"M8 6v8"}]
])

[karsa-mistmere]

We do also have a megaphone-off icon, let's make sure to keep that consistent.

To be honest, I'm not quite sure about having these both, since they're so similar, but let's wait for what @jguddas and @ericfennis have to say.

[ericfennis]

I agree with @karsa-mistmere. megaphone feels it has the same purpose/usecase IMO.
Can you clarify why we should have two similar ones, or do you see differences @jamiemlaw?

[karsa-mistmere]

I agree with @karsa-mistmere. megaphone feels it has the same purpose/usecase IMO. Can you clarify why we should have two similar ones, or do you see differences @jamiemlaw?

Also calling @jakajancar, who originally submitted the request, @jamiemlaw is "only" the implementor here. :)

[jamiemlaw]

@ericfennis @karsa-mistmere To me, the electric is more aggressive in nature than the acoustic.

Acoustic: "Roll up! Roll up! Get your icons! Icons here!"
Electric: "What do we want? Icons! When do we want them? Now!"

I could imagine a scenario where a user has the current megaphone icon to indicate, say, "announcements" but if they updated the icon library and got the new style, it might change the tone of their UI. That was my only reasoning.

[jguddas]

Maybe hard to do but if we were to give the icons a little tilt it might look more shouty.

[karsa-mistmere]

Maybe hard to do but if we were to give the icons a little tilt it might look more shouty.

I'm not a fan, that would make them look far too cartoony.

[jguddas]

Maybe megaphone-electric is a better name.

[jakajancar]

I agree with @karsa-mistmere. megaphone feels it has the same purpose/usecase IMO. Can you clarify why we should have two similar ones, or do you see differences @jamiemlaw?

Also calling @jakajancar, who originally submitted the request, @jamiemlaw is "only" the implementor here. :)

I would like it because I have never heard of an acoustic/cheerleading megaphone before, was completely unfamiliar with the shape, and the icon was unrecognizable to me. But maybe I'm just ignorant 😅

FWIW at least, a Google search for "megaphone icon" returns 23 electric ones (rounded and/or diaphragm in the center) and only 1 acoustic/cheerleading one (straight cone without a diaphragm in the center):

[jamiemlaw]

In that case, I'd be happy to rename bullhorn to megaphone, and the old megaphone design can be retired.

[karsa-mistmere]

Based on existing megaphone emoji designs, every single one of which uses roughly the same shape and concept as we currently do, I'd vote to just update megaphone to be more in line with out design guidelines and drop bullhorn.