feat(icons): added hd icon

[jamiemlaw]

Goes part-way to closing #119

What is the purpose of this pull request?

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

Description

Adds an hd icon

Icon use case

• In a media scrubber bar, shows that the item currently playing is in HD
• On a list of videos, shows that a video is available in HD

Alternative icon designs

Open lucide studio

Open lucide studio

Open lucide studio

My main submission follows the same visual format at the currently-proposed closed captions icon. However, if we were in future to add an SD counterpart to this icon, there would not be enough space for the 'S'. For that reason, it might be worth choosing one of the last two alternatives as a way to future-proof things. If that ends up being the case, would the closed caption icon need to be revised, to have the same size of bounding rectangle?

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 feathericons/#557 by @ahtohbi4
• 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

16px (shadcn/ui)

24px (default)

32px (shadcn/ui + retina)

48px (default + retina)

Icon X-rays

Icon Diffs

Icon Symmetry

Flip Horizontal

Flip Vertical

Flip Diagonal

Rotate 180°

Icons as code

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

const HdIcon = createLucideIcon('Hd', [
  ["path",{"d":"M10 12H6"}],
  ["path",{"d":"M10 15V9"}],
  ["path",{"d":"M14 14.5a.5.5 0 0 0 .5.5h1a2.5 2.5 0 0 0 2.5-2.5v-1A2.5 2.5 0 0 0 15.5 9h-1a.5.5 0 0 0-.5.5z"}],
  ["path",{"d":"M6 15V9"}],
  ["rect",{"x":"2","y":"5","width":"20","height":"14","rx":"2"}]
])

[jguddas]

Open lucide studio

[jamiemlaw]

Open lucide studio

At that size, the 1px rounding just makes the D look more like an O, in my opinion. And having no rounding would keep consistency with https://lucide.dev/icons/case-upper.

[karsa-mistmere]

This is pretty much identical to one of my hd icon drafts, the reason I never got around to submitting it is that I've been also trying to make related icons work (closed captions, audio description, small definition, 4K, 8K, 5K et cetera):

The issue is, while I prefer the top row (which this one is "part of"), that's the only one that's not actually Lucide-compliant. 😅

[jamiemlaw]

@karsa-mistmere Yup, I think you and I have been toying with the same ideas!

@jguddas posted a design for closed captions a couple of weeks ago that I really liked, so I tried applying it to the other icons in the set.

[karsa-mistmere]

I don't think HD is all that relevant anymore, tbh. If we cannot make 4K, 5K, 8K etc work, I vote to just skip this.

[karsa-mistmere]

I don't think HD is all that relevant anymore, tbh. If we cannot make 4K, 5K, 8K etc work, I vote to just skip this.

Alternatively, if #3483 is voted to go through, we could add similarly themed icons for these, that are very feasible:

Edit: same goes for PDF

[ericfennis]

@karsa-mistmere I do not agree, it is still used in other applications like images and audio. Where the term 4K doesn't exist.

[jguddas]

Maybe we should arcify the sharp corners with a .5 radius?

[ericfennis]

@jguddas Hmm disagree, the current radius matches the monitor shape.

[jguddas]

@jguddas Hmm disagree, the current radius matches the monitor shape.

I mean the D not having any round corners.

[ericfennis]

@jguddas
Ah, yeah, if we are sure the letter D is still readable and not confused with another letter. But to me it looks still readable, what do you think?

Without

With (0.5 radius)

[jamiemlaw]

I'm happy with adding a .5px radius.

I am on travels so expect a couple of days before I amend the PR.

[ericfennis]

@jamiemlaw Agreed!

[karsa-mistmere]

@jguddas Ah, yeah, if we are sure the letter D is still readable and not confused with another letter. But to me it looks still readable, what do you think?

Without

With (0.5 radius)

Not bad, but maybe we could enunciate the arcs on the right side a just tiny bit more?

Open lucide studio