Locate icon

[csandman]

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!

[ericfennis]

@csandman Welcome to Lucide!
Love the icons, I think right-top or left-bottom looks the best to me.

Can you maybe post and image with the icons on 100% view (when they are small).

[ghost]

Isn't the crosshair icon similar?

[moeenio]

It is! We should add tags to it

[Andreto]

crosshair is similar but it doesn't have the same use-case.

[ghost]

@Andreto couldn't map-pin also work for this use case?

[moeenio]

Not exactly! the requested icon is for a button for finding the current position of the user, while map-pin is for representing a specific point on a map (or an action related to that)

[ericfennis]

Yeah like the button in the right down corner in Google maps app.

[moeenio]

Yeah like the button in the right down corner in Google maps app.

I would have used this example too.

[csandman]

I think the closest example for the use case that currently exists is the navigation icon however I think this offers an alternative to that icon with a slightly different meaning. For example I'm currently using this in my application as a "center" and "reset zoom" icon.

Here are the icons in context of the site so you can see what they look like smaller:

Personally I like the far left or far right. I've personally been using the one on the far right as it matches the minimalist theme I feel like feather has.

[ericfennis]

I agree with you, seeing this on 100%. I like num 1 and 4 as wel. But num looks ok to me.
I also came up with the idea, maybe we can include num 4 and num 2 together.

• Num 4 as locate
• Num 2 as locate-active

Just an idea, let me know what you think .

[csandman]

@ericfennis I'm confused now, are you saying you want to include number 1 and 4 together or number 2 and 4 together?

[csandman]

as far as combining 2 of them goes, I think the spacing on 1 is better here, the small circle in the center looks scrunched up on the second one. So I could match the last one's circle size to 1 and we could add both of those with the active/base names.

[csandman]

also I found some actual examples for those that are curious, here are the Material icons that are equivalent to this:

https://material.io/resources/icons/?search=gps&style=baseline

[ericfennis]

@csandman Sorry for the confusion.
The icons you posted here above looks awesome!

Maybe locate-fixed is better.. 🤔

[csandman]

@csandman Sorry for the confusion.
The icons you posted here above looks awesome!

Maybe locate-fixed is better.. 🤔

I could change it to locate-fixed! Would you like me to submit a PR?

[ericfennis]

Yes please!

[csandman]

@ericfennis I set up my local environment and it appears that I'm having some issues. For one, the npm start command isn't working:

I was able to fix it by changing the command to babel --watch src --out-dir build however I'm not sure if this is the correct fix to the issue.

My other issue is that, when running optimize the properties on my svg source files are not getting put on their own lines. I know in the original feather library this would happen to keep the icons consistent but it does not appear to be working here (even though the process looks to be about the same). This is what I am left with:

<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">
  <line x1="2" x2="5" y1="12" y2="12"></line>
  <line x1="19" x2="22" y1="12" y2="12"></line>
  <line x1="12" x2="12" y1="2" y2="5"></line>
  <line x1="12" x2="12" y1="19" y2="22"></line>
  <circle cx="12" cy="12" r="7"></circle>
</svg>

I notice that there is no package-lock.json included with the source files so one or both of these issues could be due to a version mismatch of one or more packages.

It also could potentially be due to prettier rules I have set up on my editor, as I'm noticing there is no .prettierrc saved in this package. It would probably be a good idea to set up a prettier config file in general as I have had issues with conflicting defaults in the past. Here is an example of one that should cover all of the rules.

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf"
}

Let me know if you have any idea why my svgs aren't formatting correctly!

[ericfennis]

Optimize script is not working wel, I need to fix that.
We recommend to use SVGOMG;
And after it I mostly format the code by myself.

[ericfennis]

If you need help, I can help you with that.

[csandman]

@ericfennis So I worked it a bit and fixed the optimize script. I can submit a PR for that if you'd like. However after running it many of the existing icons have slightly modified code, most likely due to changes in the version of svgo. So I'm not sure how you'd like to proceed with that, I can submit a PR for just the changes to the script and you could try it out?