feathericons / feather

Simply beautiful open-source icons

https://feathericons.com

MIT License

24.9k stars 1.22k forks source link

Icon Request: HD icon #557

Open bernaferrari opened 5 years ago

bernaferrari commented 5 years ago

I thought it would be nice to have a HD icon, like x-square and many others. I did really on Illustrator something like this: (ignore the black D, I don't know how to make it intersect)

Inspired by this: https://material.io/tools/icons/?search=hd&icon=hd&style=outline

Icon name: HD (High Definition)
Use case: Video player
Screenshots of similar icons:

I think if you can get the margins correctly, it can become a really nice icon and not hard to make.

This is the project, in case anyone wants to play with it: x-square-hd.ai.zip

locness3 commented 5 years ago

171 @bernaferrari

bernaferrari commented 5 years ago

I'm not a designer, I barely know how to move things on illustrator. I attached everything so someone with more knowledge can make it aligned to the guidelines.

ghost commented 5 years ago

That's a good suggestion for a font icon.

bernaferrari commented 5 years ago

Pixel perfect:

Do this pass the 'no fill' rule? There is no (decent) way of making the HD with strokes. I got the HD from Material Design icons and modified the D with an outside 2px corner to match the specs. If you are satisfied, I can submit it as PR. @colebemis hd-icon.zip

jletey commented 5 years ago

@locness3 @colebemis @bernaferrari How does this look? I followed #171

locness3 commented 5 years ago

@locness3 @colebemis @bernaferrari How does this look? I followed #171

It looks great, although idk if using corner radius is allowed. What do you think @colebemis ?

jletey commented 5 years ago

@locness3 I personally think without the corner radius it looks like H0 and not HD ... but what is your opinion @colebemis?

bernaferrari commented 5 years ago

I'm not sure what's wrong with the one I sent a few months ago.

jletey commented 5 years ago

@bernaferrari It didn't follow #171 ... the team is really strict about new icons following these rules! Although when you do follow them ... your icon looks really nice 😍! That is why they are there!

bernaferrari commented 5 years ago

You could have mentioned this a few months ago.. I tried to follow everything, it is 2px everywhere.

jletey commented 5 years ago

@bernaferrari Yes ... it appears you did follow the 2px rule ... but there is also the rule of rounded edges (among others) ... do go and read #171 ... and ask me any questions if anything doesn't make sense ... it personally took me a while to understand what they meant!

ahtohbi4 commented 5 years ago

I suppose you try to get something like that:

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M14 9H16C17.1046 9 18 9.89543 18 11V13C18 14.1046 17.1046 15 16 15H14V9Z" />
  <path d="M6 9L6 15" />
  <path d="M10 12H6" />
  <path d="M10 9L10 15" />
  <rect x="2" y="2" width="20" height="20" rx="2" />
</svg>

jletey commented 5 years ago

@ahtohbi4 How is this different from the one that I made?

ahtohbi4 commented 5 years ago

@johnletey from this one?

locness3 commented 5 years ago

@ahtohbi4 No, this one

jletey commented 5 years ago

Thanks @locness3!

bernaferrari commented 5 years ago

I really liked that @ahtohbi4. Your H is less spaced.

jletey commented 5 years ago

Got it @bernaferrari!

ahtohbi4 commented 5 years ago

@ahtohbi4 How is this different from the one that I made?

ahtohbi4 commented 5 years ago

@bernaferrari @johnletey if you wish, I could create a PR with this version?

jletey commented 5 years ago

@ahtohbi4 Go for it! You guys didn't like my version (and I personally like yours better 😄)!