Feather: Icon request: QR Code

[Aviortheking]

Icon Request

• Icon name: qr-code
• Use case: show a qr3code on click
• Screenshots of similar icons:
  font-awesome: https://fontawesome.com/icons/qrcode
  mdi: https://materialdesignicons.com/icon/qrcode-scan

[jletey]

@colebemis @locness3 @Aviortheking How does this look?

[locness3]

Have tyou made it by yourself ? BTW, please check you are conform with #171 .

[jletey]

@locness3 I looked at the font-awesome design and then tried to use #171, although I'm not quite sure I did a good job ... but yes, I made it by myself.

[locness3]

@locness3 I looked at the font-awesome design and then tried to use #171, although I'm not quite sure I did a good job ... but yes, I made it by myself.

Instead of doing what you're doing, use squares with 2px borders.

[jletey]

@locness3 so no rounded edges ... but 2px borders?

[locness3]

@locness3 so no rounded edges ... but 2px borders?

You should round edges with a 90degree angles (as states #171

[jletey]

@locness3 I have updated the icon ... please take a look!

[locness3]

You should round the bottom-right thing, and make it a compound path.

[locness3]

More than just rounding them, you should make them strokes, no fills are allowed.

[jletey]

@locness3 I have refactored with all of your changes ... unfortunately, it was really hard for me to get the two squares in the bottom-right thing to be apart of the rest of the vector for the bottom-right thing ... hopefully, this isn't a problem!

[locness3]

@locness3 I have refactored with all of your changes ... unfortunately, it was really hard for me to get the two squares in the bottom-right thing to be apart of the rest of the vector for the bottom-right thing ... hopefully, this isn't a problem!

When you will have rounded the two squares at the bottom right, that will be perfect!

[jletey]

@locness3 Not exactly quite sure how I'm supposed to round the square, as when I try to round them, they either change to nothing or a ring 😞 ... but, if I change the stroke width to 1px (which is clearly against #171), I get a perfectly rounded square!

[Aviortheking]

on Figma a single point with stroke isn't shown at all so don't worry about that

[locness3]

@locness3 Not exactly quite sure how I'm supposed to round the square, as when I try to round them, they either change to nothing or a ring 😞 ... but, if I change the stroke width to 1px (which is clearly against #171), I get a perfectly rounded square!

Do a single path point with a stroke

[jletey]

@locness3 How exactly do you do a "single path point with a stroke"?

[locness3]

@locness3 How exactly do you do a "single path point with a stroke"?

Create one path point with your habitual pen tool I guess

[jletey]

@locness3 Doesn't work ... when I try to do this, by creating a point with the pen tool, it doesn't show up even after I select different strokes

[locness3]

@locness3 Doesn't work ... when I try to do this, by creating a point with the pen tool, it doesn't show up even after I select different strokes

Have you tried exporting it and oprening in a browser ?

[jletey]

Have you tried exporting it and oprening in a browser ?

@locness3 Just did ... not showing up

[locness3]

Have you tried exporting it and oprening in a browser ?

@locness3 Just did ... not showing up

🤔

[reinhart1010]

I'd like to suggest another design for the QR code icon:

This is heavily influenced by several Indonesian digital wallet apps that bear similar icons:

I decided to use a rounded square on the bottom-right corner to be distinguishable from others, so people may still be able to interpret this as a normal QR code.

You can have a look of the SVG file at https://drive.google.com/open?id=14nO2J2PaODXfcgmB7ZIc3SXf4RPHzXQZ

[locness3]

Idk, what do you think @johnletey ?

[JelleBlaauw]

@colebemis @locness3 @Aviortheking How does this look?

You've got the Font-Awesome flag in there, so no, I wouldn't do it like this.

[krrohitch]

Would like to make a suggestion here - Figma link

[locness3]

@krrohitch To me, this is more "scan qr code" than "qr code".

[krrohitch]

You have a point there. I'll try one without the outer frame.
Meanwhile, this could be used as qr-scan if required.

[krrohitch]

Made a quick iteration. What do you think @locness3 ?

[arjasco]

I attempted something similar using the grid icon as the basis.

Would love a native QR code icon that matches the rest of the icon set please!

[johnletey]

@arjasco Unfortunately, that icon has fills in it - which is against the Feather icon guidelines.

@krrohitch Well done 😍 Would love to see those icons add to @featherity 😉

[arjasco]

@johnletey Understood! It wasn't meant to be a candidate for this icon, just a play on an idea before coming to this issue.

How could we see the icon @krrohitch has produced make it in? This repo seems like is really isn't getting much attention which is a shame because it's a great icon set.

Does the mentioned fork contain all the current icons? I'm currently creating an SVG map with a subset of the icons I require, annoyingly could really do with a QR code one ☹️

[johnletey]

@arjasco Understand 😄

And yes, the fork is actively maintained by myself and the contributors. @ericfennis is working hard on publishing usable packages! (https://github.com/featherity/featherity/pull/52)

[arjasco]

@johnletey Looks great! Will keep an eye on the improvements and might look to swapping to this. Thanks!