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?

[moeenio]

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.

[moeenio]

@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?

[moeenio]

@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!

[moeenio]

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

[moeenio]

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!

[moeenio]

@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

[moeenio]

@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"?

[moeenio]

@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

[moeenio]

@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

[moeenio]

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

[moeenio]

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

[moeenio]

@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! (lucide-icons/lucide#52)

[arjasco]

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

[CodeLake]

Been wanting to use the native feather QR-Code icon for a while and ending up using a work-around. Has the completed icon been published?

[reinhart1010]

Yeah, one has been merged to a fork of Feather icons - see lucide-icons/lucide#141

[CodeLake]

Yeah, one has been merged to a fork of Feather icons - see lucide-icons/lucide#141

Thank you. I was wondering if there is a plan to add it to feather icon set natively?

[lauhon]

Bump, i would love this :)

[moeenio]

This icon is available in @lucide-icons, a community fork of Feather : https://lucide.dev/icon/qr-code?search=qr

[lauhon]

Thanks for the information! :)

But wouldn't it be nice to merge it to the main repo?

For example, my usecase is to use the icons via React Native Feather which - as far as I know - only has access to the main icons and has no built in api to configure it to use the community fork.

Im curious, whats the "right" way to go about this, should I make an effort to combine React Native Feather with the community icons, or should @feathericons include more community icons?

[karsa-mistmere]

Lucide also has a standalone package for React Native, and has a whopping 975 icons compared to Feather's 287, I would advise you to just switch over to lucide-react-native from react-native-feather.

[lauhon]

Oh, nice. Thanks for pointing that out.

Almost makes me feel like a traitor, but in that case I'm gonna switch to lucide icons :D

[moeenio]

But wouldn't it be nice to merge it to the main repo?

Yes it would be. But the repository has no active maintainers.