feat(icons): added road icon

[uibalint]

What is the purpose of this pull request?

• New Icon

Description

Added new road icon.

Icon use case

In my case, I need it for a package tracking process, where I want to indicate that the package is on its way, and I’d like to use the image of a road for this purpose.
I can also imagine it being used on a map to show the type of road, such as asphalt or dirt road.

Alternative icon designs

Icon Design Checklist

Concept

• I have provided valid use cases for each icon.
• I have not added any a brand or logo icon.
• I have not used any hate symbols.
• I have not included any religious or political imagery.

Author, credits & license

• The icons are solely my own creation.

Naming

• I've read and followed the naming conventions
• I've named icons by what they are rather than their use case.
• I've provided meta JSON files in icons/[iconName].json.

Design

• I've read and followed the icon design guidelines
• I've made sure that the icons look sharp on low DPI displays.
• I've made sure that the icons look consistent with the icon set in size, optical volume and density.
• I've made sure that the icons are visually centered.
• I've correctly optimized all icons to two points of precision.

Before Submitting

• I've read the Contribution Guidelines.
• I've checked if there was an existing PR that solves the same issue.

[github-actions]

Added or changed icons

Preview cohesion

Preview stroke widths

DPI Preview

16px (shadcn/ui)

24px (default)

32px (shadcn/ui + retina)

48px (default + retina)

Icon X-rays

Icon Diffs

Icons as code

Works for: lucide-react, lucide-react-native, lucide-preact, lucide-vue-next

const RoadIcon = createLucideIcon('Road', [
  ["path",{"d":"M12 16v5"}],
  ["path",{"d":"M12 5V3"}],
  ["path",{"d":"M12 9v3"}],
  ["path",{"d":"M16 21h4a2 2 0 0 0 1.924-2.55l-4-14A2 2 0 0 0 16 3"}],
  ["path",{"d":"M8 3a2 2 0 0 0-1.924 1.45L2.077 18.449A2 2 0 0 0 4 21h4"}]
])

[ericfennis]

Cool I like it.
I think we can also add variants with for example a snowflake to indicate "road" conditions.

[jguddas]

I'm not a fan, feels very brutalistic, I would love a bit of a swoosh and curve and cuteness.

[jguddas]

I don't like it, needs more cuteness.

[karsa-mistmere]

Hi @uibalint,

Nice work on this, it does look clean and minimalistic.

That said, I do think that @jguddas also has a point. I've let this sit for a while because I had a similar feeling — like something was missing — even though I couldn't quite put my finger on it at the time.

Now, I think I see what it is: somewhat counterintuitively, the lack of a clear start and end makes the icon harder to read. For example, if it were filled, we might expect something like this:

Which, with strokes only, would be analogous to:

i.e.:

Open lucide studio

@jguddas, lmkwyt

[jguddas]

I like it, maybe we can make it look more 3d and less like a flip icon by making the dashes become shorter and more frequently the higher up we go.

[karsa-mistmere]

I like it, maybe we can make it look more 3d and less like a flip icon by making the dashes become shorter and more frequently the higher up we go.

I already tried to do that. 😅

Here are two alternative layouts:

Open lucide studio

Open lucide studio

[jguddas]

Looks weird, but at 100% scale feels quite nice.

Open lucide studio

[karsa-mistmere]

Looks weird, but at 100% scale feels quite nice. Open lucide studio

Not bad at all, actually. 🤔

[ericfennis]

To me looks fine as well. Go for it @jguddas!

[karsa-mistmere]

Dunno, now looking at them all at 100%, @jguddas' version feels a bit weird, as if it was some sort of reflect icon. 🤔

[ericfennis]

@karsa-mistmere Hmm true, maybe the last one?