lucide-icons / lucide Goto Github PK

Icon Request

• Icon name: skull
• Use case: Headlines
• Suggestion:
  

The README has a lot of content added but its Table of Contents was not updated.

I'm almost done with creating the react package, and for that I need to write some documentation as well.
With that, maybe it is nice to centralize the documentation.

I got a bit inspired by the ChakraUI website, I think they have an great, simple and nice looking documentation site. I noticed they use their own UI + next.js, the same as we do. And they use enhanced markdown to generate documentation pages. (.mdx files), see their [next.config.js](https://github.com/chakra-ui/chakra-ui/blob/develop/website/next.config.js).

So maybe we can use that as well.

1. Search input border-radius on dark mode.

Issue
The input field has a border-radius but the chakra-input__group css-r27y85 element is poking out underneath. On light mode this is not an issue since the color of the element is the same as the body.

Solution
Give the chakra-input__group css-r27y85 element the same border-radius as the input.
or
Give the chakra-input__group css-r27y85 element the same background-color as the body. (Maybe this messes up the color of the input.)

2. Color input box.

Issue
The color input elements have a border-radius on the bottom with no padding to the box below.

Solution
Maybe put no border-radius on the bottom corners. I also think that the color field could have a border around it. Looks a lot better on the bright side.

Alternatively, some margin between the input and color field.

Maybe something like :

Featherity is a fork of Feather Icons made by the community. We try to expand the icon set as much as possible while keeping it nice-looking - join us!

When was designing the align icons I came across the menu icon.
I like the menu icon, but I think the current one look a bit too rectangular.
So made the length of the line a bit shorter, so it is more squared.
Also the menu icon is often displayed without text and used in an squared element.

I'm curious what you think of this change.

since this is a fork of feather icons, would be good to have some sort of indication for icon status.

ie. whether an icon is —
(a) unchanged from feather,
(b) modified from feather, or
(c) new icon not shipped in feather.

This could either be a standalone docs page on GH or if integrated into https://lucide.netlify.app it could be in the form of a dot or triangle

as there's currently no changelog (that I can see), the only way to find out if icons have changed or new from feather is to compare them or go through the commit history

pros for current feather users —
able to do a quick glance on what the new sets are; easily allow designers/devs to make the judgement call on whether or not to switch. and if so, whether icons have been modified to avoid surprises

perhaps would look something like this — 

thoughts?

Since we don't add any brand icons, I think we should remove the current ones. What do you think?

Super specific request, you may close this. I figure it could be possible to do a boat and telescope (tripod with a tube) in svg.

Nautical dusk: Sunset with a boat in the background.
Astronomical dusk: Sunset with a telescope in the background

Nautical dawn: Sunrise with a boat in the background.
Astronomical dawn: Sunrise with a telescope in the background.

I put together a solitaire game for android. First I tried using the unicode symbols, but was surprised to learn that they commonly receive a fixed coloring when rendered as text (i.e. spades and clubs are black and diamonds and hearts rendered red, despite explicit application text styles). This was true in my case, due to whatever rendering engine treats Flutter Text elements.

So I looked for some SVG's for it, and found some that worked well enough. I find after playing the game a bit though, at the scale of my phone's display, the spades icon (♠) and clubs icon (♣) are not differentiated well enough, causing some eye strain.

I did not see any great alternatives in other icon sets. I can try to submit a PR if it's a welcome addition here.

Icon Request

• Icon name: playing card suits (hearts (filled), spades, clubs, diamonds)
• Use case: implementing or creating an icon for a card game
• Screenshots of similar icons:

in the app, without enough differentiability:

these clubs are visually different from the spades, the lobes (?) of the clubs are nearly completed circles:

standard cards showing similar style, good difference between clubs and spades

this is an example of not-so-great difference spades/clubs, unfortunately prevalent among free icon svgs

here's a vintage style clubs which seems to completely differentiate from spades, but it's less iconic, my preference would be similar to the standard cards above

Icon Request

• Icon name: locate
• Use case: on map type applications, find the location of the user
• Screenshots of similar icons: I actually already made one, and want to submit it but I'd like others' opinions on which one is best. Personally I like the bottom right one the best, it sticks to the "simpler is better" theme that feather has going on and follows all the rules.

I can submit a PR if you agree that one is the best option!

Icon Request

• Icon name: laptop
• Use case: for laptop computers
• Screenshots of similar icons:
  

I created the icon on my own, I can send the SVG file

Hi there!

First of all, thank you a lot for the initiative to, somehow, moving forward the Feather project. I really hope the effort and result can convince @colebemis about his concerns and see both project meet in the near future.

That said, my request is an icon for the "Screen sharing" action in a video conferencing software. Back in April, I was trying to do it but my lack of design / SVG / Figma knowledge didn't allow me to make something presentable. Even after spending quite some hours! Quite frustrating :)

However, just in case it could be helpful, I can tell you that I don't like too much the one included in the Material Design icons. Maybe, something similar to https://thenounproject.com/search/?q=screen%20share&i=2012801 or https://thenounproject.com/tomekpst/collection/basic-icons/?i=2012799 but based the Feather/monitor could look nice.

On the other hand, using the Feather/wifi or Feather/rss icon as part of it instead of the arrow could be confusing because it seems to be more appropriate for an "screen-casting" action, isn't it?

What do you think? Could it be possible to have feather-style icons for start / stop sharing the screen?

Thanks in advance.

Icon Request

• Icon name: start-screen-sharing, stop-screen-sharing

• Use case: for a video conferencing software

• Screenshots of similar icons:

Hi!

Is there any chance that Featherity can be compiled to TTF?

Thanks 🤗

It's a bit unconvenient to download a PNG icon without being able to choose its color, you have to manually recolor the picture afterwards.
Please add a color picker, to change the color of the downloadable PNGs.

We currently have a tags.json file in the root, containing tags for each icons.
This to improve searching on the site.

The problem with adding new icons is that we often forget to update this file.
So I thought maybe we can define it also in the svg file, when opening new PRs we can submit suggestions on the svgIcon.

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  tags="read, dictionary, booklet, magazine, library"
>
  ...
</svg>

Regarding to the thread in #57 @llaenowyd said this:

I think after re-reading the submission guidelines , maybe there should be one PR for each icon.

I certain way I think this is a good idea to write this down in CONTRIBUTING file.
For me it's a little-bit of an unwritten rule that you need to submit icons or "icon series" in separate pull-requests for several reasons:

• It's easier to review
• Keeps the discussions and reviews about the icon(s) scoped and in one thread.
• All points above contribute to less time to merge PR's

I'm curious what you think.

Can you please tell me where to put new icons to be visible on the site when it's deployed?

Similar: #579

Icon Request

• Icon name:
  files
• Use case:
  For multiple files/documents

Icon Request

• Icon name: battery-25, battery-50, battery-75, battery-full and -charging versions.
• Use case: There are currently 2 battery icons: one when plugged in ("battery-charging") and the regular "battery". It would be nice to be able to indicate the charge level as well. 0 (available currently), 25%, 50%, 75% and full should be enough.
• Screenshots of similar icons:

There are stil some great icons waiting to be merged in the feather repo.
Do you think we can just take their code and contribute it to this repo? 🤔
Or do we need to ask them to do that.
For example the #813, the dice icon look cool to me.

Issue
When you copy the SVG code there is no way to close the "Copied!" alerts and they just keep stacking up and blocks the view.

Solution
It would be nice if they disappeared after a while and/or had a close button.

Screenshot

I was browsing around the code and Cole Bemis's email is still in the Code of Conduct as the project contact. May want to change that.

Icon Requests from Feather

To do

• 🚧 HD icon #557
• 🚧 Hand Icons #444
• 🚧 Walking #471
• 🚧 Question Mark #550
• 🚧 Digital watch #705
• 🚧 Text ABC #885 use case-upper
• Story #1019
• Motorbike #1127
• Refund #1130
• Ambulance icon #1177
• 🚧 Hospital #1178 #1952
• 🚧 Briefcase-medical #1180
• Clipboard-medical #1181
• Home-medical #1182
• Bandage #1187

Full list of issues

Legend: ✅ Added | 🚧 Under construction | ❓ Unsure | 🟥 Rejected

Updated 3th of Nov 2023

Add tags related to the icons, like on feathericons.com. This allows for easier search and discovery of the icons.

Prerequisites

• Operating system: Ubuntu 20.04.1 LTS
• Bits: 64

Step to reproduce

1. Go to the Lucide website
2. Enter a search query
3. Select an icon

Actual behavior

The searched query clears when selecting the icon.

Icon Request

• Icon name: cross
• Use case: health or pharmacies
• Screenshots of done icon:

Could submit this as a PR

To use for percipation probability

Three droplets that are going diagonally, from bottom left to top right. Will look like rain that is falling in the wind.

The rain icon is not very beautiful, and the droplets should go diagonally.

Icon Request

• Icon name: flashlight in on on/off state.
• Use case: quite obvious :)
• Screenshots of similar icons: they are not really nice, but there is https://fontawesome.com/icons?d=gallery&q=flashlight

I don't know about using Yarn, so I'm not sure, but I think the packages folder shouldn't be committed?

Icon Request

• Icon name: infinity
• Use case: for headlines
• Suggestion:
  

Sorry for posting so many issues, thank you for a great fork!! Exactly what I've been looking for. I have some more suggestions for weather icons:

Hot weather: A thermometer with a sun
Windy weather: Three curvy strokes that looks like someone is blowing.
Heavy showers: Cloud with rain that goes diagonally,
Cold temperature: Thermometer with a snowflake.
Clear night: Moon but with two stars, one small and one a bit larger.
Partly cloudy: Cloud with sun in the back.
Thunderstorm: Cloud with a lightning.

Suggestion:
Nicer looking cloud and snowflake.
The original clouds doesn't look very nice, it's hard to see that they are clouds. Do them a bit like this instead, and also the snowflake.

Prerequisites

• Version: The website actual prod
• Are you running from source/master: Yes
• Are you using a released build: Ofc lol
• Operating system: Windows
• Bits: 64

Step to reproduce

1. Use system dark mode
2. Erase dark mode's local storage
3. Reload page

Actual behavior

The search bar, the "download all" button and the hovered cards are illegible.

Resources

Sun with the word UV written inside for use for UV index in weather map

luicide icons are soo underrated, why don't you guys develop a plugin for Figma?

I use yarn workspaces, and as I moved lucide-react to the root package.json, I got an error: duplicate-react. At the moment I fixed the problem via yarn resolutions, to make sure to install only one react version. I think, react a well as prop-types should be peer-deps.

[email protected]

According to thread in #68 the output of the icon-font is not matching the quality of the svgs.

The Problems:

• overlapping paths are inverting each other.
• paths not having the rounded joins
• paths not having the rounded caps

Step to reproduce

Download artifact from this link.
Open the html file

Actual behavior

Icons need to be the same as the svgs

Possible solution

According to the fontcustom documentation we are not matching the SVG Guidelines.

Possible solution is converting the svgs stroke paths to outline paths before we build a font file.
I found this library outline-stroke transform paths, maybe we can use this for the solution.

To be able to preview icons as they will appear on the site

Hey I thought maybe we can think about how we can build the community.
I wrote down some ideas, maybe you can help and share your ideas as wel.
Let me know what you think!

For the community

• Slack or discord for faster feedback / sparring about icons and building the repo/community. Link here

For Contributing

• Create a design guidelines markdown file, from #171
• Update CONTRIBUTING markdown file
• Nice guide how to design icons in figma or other design programs
• Nice guide to work with the code.
• Documentation how to use those icons.

Icon Request

• Icon name: Creative Commons
• Use case: alternate version of copyright and copyleft for cases where the license is specifically a CC license.

Ideally, an icon for each of the possible license types, but at minimum just the cc enclosed in a circle. I will design them myself in the coming week or two if no one else does.

What design direction should we go in for Reply, Reply All, and Forward?
In the request issues on Feather, two example designs were given, similar to the icons in Outlook and Gmail.

Requests from feather:
Reply: feathericons/feather#380
Replay All: feathericons/feather#381
Forward: feathericons/feather#384

Outlook (simple lines):

Gmail (filled shapes):

I prefer the Gmail approach a bit more and I made icons for reply and reply all:

I'm not really working on anything else than icons, but IMO we shouldn't use only 1 repository (e.g. icons, npm package, etc...)

Icon Request

• Icon name: file-code
• Use case: source code files
• Screenshots of similar icons:

(source: https://fontawesome.com/icons?d=gallery&q=file-code)

Hey there 👋

I'm working on the team in the process of migrating a website from one tech stack to another. In the process, we are migrating from font-awesome to feather icons. I see a lot of file type icons, but would also love one that looks similar to the screenshot above.

I'd PR this myself, but as an engineer and non-designer, I can't say I know the toolset well enough to know where to begin 😅 . Thanks for the help ahead of time!

@johnletey Some open/old PRs from your old account in the feather repo have some awesome icons!
I think we can add them to Lucide.

Here is a list of the icons I think are welcome to add to the Lucide repo!

• Currency icons pr
• code-2 icon pr
• file-check, file-times , folder .. pr
• webcam pr

More PR from John

Three droplets, to use for air humidity in weather app.

We should change the repo's description.

Maybe "Simply beautiful open source icons, community-sourced"?

I think it's a good idea to have a different visual identity to the official Feather project.

Here is a potential logo:

It is a combination of the GitHub octicons repository icon (to represent the "community" part of this project) and the feather icon (to stay true to our parent project).

Figma

Icon Request

• Icon name:
  building
• Use case:
  For organisations