New lucide.dev homepage design request

[ericfennis]

We need a new homepage design. And I'm curious how others think about this.

The problem

The current one is fine but performance is getting worse. The lighthouse insight is ranking us lower because the current homepage DOM size is to big. That's because we render all the icons on the homepage. So my Idea is to move the icons page to his own page, keeping the homepage fast and we can also reorder the homepages more focusing on more info e.g. add some more info about Lucide and the community.

New Icons page

I started with the icons page already, also added categories so you can also view all the icons by category. We can also expand this with more features.

What we need, a new design!

A new homepage design, designed in Figma or other design program, would be nice to view it online with public link.

The design should contain:

• link to icons page
• Github link
• download icons button?
• all the platforms we support, (we currently have all those icons above the buttons).
• maybe comparison things

It's a homepage so it can something cool and special, so be creative. Would be nice if it matches the current style and component library we use (ChakraUI).

Ideas are welcome!, Please leave comments below so we can discuss them!

[karsa-mistmere]

Yeah, I think load time is definitely an issue, and in the long run we're probably going to have to let go of the whole concept of having all icons visible on a single page.

As for categories: I really like the general idea, but I'm not quite sure if grouping by categories is the way to go (since, as I've already said in #94, categories have significant overlaps), I'd probably opt for a faceted search.

Here's a pretty rough first draft of what I imagine the front page and the icons page could look like: https://www.figma.com/proto/MAGha7ERy1Suu2scKvRw1Q/lucide%2Fhomepage?page-id=0%3A1&node-id=2%3A196&viewport=242%2C48%2C0.58&scaling=min-zoom

[ericfennis]

@karsa-mistmere Woww that's loooks really lit :fire:, nice work!! Really like customization panel, shows you what you can do with it.

Yeah for the categories I think would be nice to make it optional. Would be nice if the site can play a nice role as sort of tool. I think we can build a icon detail page as well. Feather icon tried to make one, really like this one: https://feathericons.dev/airplay. Maybe we can make tabs for each package so you can easily copy the code you need.

[karsa-mistmere]

Thanks. As for an icon detail page... hmm... not quite sure. Love all the added detail and the general idea of having an extra tool, but from a UX point of view I think it's problematic to heavily detach icon details from the list / overview. How about a larger modal instead of the current preview and a separate maximized detail page behind a maximize button? https://www.figma.com/proto/MAGha7ERy1Suu2scKvRw1Q/lucide%2Fhomepage?page-id=0%3A1&node-id=46%3A24070&viewport=242%2C48%2C0.58&scaling=min-zoom

[it-is-not]

I like the prototypes a lot, and agree with what @karsa-mistmere says about the icons not being detatched, but (just to suggest some more ideas to consider) I think maybe we could take everything from the modal and put it into a sidebar, and put everything in the sidebar above the icons. This would make it so you can browse icons and get the code at the same time, which is a bit similar to what what Material Icons does.

This is very quickly made, missing a few details, and definitely needs changing quite a bit, but something like this might be good to consider:

[karsa-mistmere]

I like the idea of the preview / tool not obstructing the icon grid, but I think there are a few issues that we need to address:

1. There will likely be too many categories* to use a horizontal filter for them, I think a vertical facet list is by far superior from a UX point of view. If we really want to go with a horizontal layout, I'd opt for a dropdown filter such as: (But I prefer the vertical layout, since that'd be much easier/nicer to implement responsively).

(* just a few from the top of my head: arrows, brands, text, layout, files, transportation, communication, accessibility, account/access, connectivity, emoji, food/beverage, navigation, animals, nature, science, social, time/calendar, weather, people)

2. I think there's just not enough space to add proper usage demos in either a sidebar, nor a modal, we could add a few, but it would be a bit crammy compared to a details page.

I actually quite like the current non-obtrusive snackbar-ish modal, I think we could fit the code copy tool into it:

[it-is-not]

@karsa-mistmere I like all of those ideas but I agree - the last one would probably be best (people are used to it anyway).

Also, I've had a few other ideas (some better than others):

• when the search doesn't have any results, maybe it could have a link to the icon request page
• shift and click should copy the icon like it does at the moment (this isn't an idea, but it's easily forgotten)
• maybe we could have a shortcut to download it without having to find the download button or a shortcut to view the icon's preview page, and we could maybe write these shortcuts down somewhere
• the customize menu should keep its reset button and the color should default to currentcolor (this will make sure it works with all our users' projects)

[karsa-mistmere]

1. Love the empty search fallback idea
2. I actually had no idea shift click copied the icon. We should probably add a help text stating this?
3. How about a context menu? Right click and a few preset options: copy name, copy svg, download, link to details page?
4. For sure, currentColor should definitely be the default.

[mittalyashu]

@ericfennis As for the performance issue for loading all the icons.

We can fetch the icons using an internal API and using pagination. That could resolve the issue. And since, we're already using Vercel, they'll handling the cacheing of API response.

[ericfennis]

@mittalyashu Good idea!

[locness3]

@karsa-mistmere I really like your mockups.

I am just not sure about how this looks being a single column of text :

[Comprehensive-Jason]

Hopping in this issue to add another suggestion. Please add some way to filter icons by version, or add a small bit of text for each icon stating which version they were added. Most software is not up to date with the latest lucide version, so being able to check which icons are available would be a great help.

[karsa-mistmere]

@Comprehensive-Jason: you're kicking at an open door, we'll definitely have a version badge in the details overlay. :)