[icon request] Outline or hierarchy

[zoharma]

Icon name

outline

Use cases

This is when a button to show hierarchical content is needed.

Design ideas

SVG:

Checklist

• I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)
• I have searched existing icons to make sure it does not already exist and I didn't find any.
• I am not requesting a brand logo and the art is not protected by copyright.
• I am not requesting an icon that includes religious, political imagery or hate symbols.
• I have provided appropriate use cases for the icon(s) requested.

[chessurisme]

The list might be helpful in your case for outline.

If that is not your case, tell us why?

Here's the proposed icon:

[karsa-mistmere]

To represent hierarchy I would probably use list-tree or network. While I don't fully understand the use case ("button to show hierarchical content"), if it's for some sort of page/document outline toggle button menu, some other list icon, or even panel-left/right could also work.

That being said, I understand, why you might want a different icon here, I'm just not entirely sure the proposal is legible enough to represent hierarchy, since there are no two items at the same level, so for me, it feels somewhat more like some kind of text or flexbox alignment/justification setting.

If you feel like the suggestions do not cover your use case, can you please elaborate what exactly you want to use it for and provide some other possible use cases for it?

[zoharma]

The intension of this icon is to show content hierarchy, e.g. a list of all the sections in a document, such as all the headings in a page.

You are correct that this is a type of list-tree and potentially the proposal should be called list-tree-2. I find the current list-tree to be slightly awkward, and looks like a variation of quote. All I see it the t inside, and it's not helping to show the intention.
My suggested is cleaner and shows the levels within a block in a simple way.

panel-left/right are not informative enough on what they would end up showing, and the other icons you are suggesting are already recognised as what they are.

[karsa-mistmere]

In general, I would actually advise against using an icon for this use case, as there isn't one that's generally recognised for this purpose – at least not yet.

I think pretty much any app I know that has this feature uses what is basically a plain text toggle, e.g.:

Gitlab Docs:

Vitepress:

Svelte:

Nuxt:

Most other sites I checked either completely skimp on this feature on mobile devices, or add the table of contents as an explicit, static element at the top of the page.

Solid.js uses a rather unintuitive chevron button, so yeah, I agree, https://lucide.dev/icons/panel-right-open is also suboptimal even if marginally better:

As for the proposed icon, I'm simply not convinced it screams hierarchy loud enough. 🫤
It would be great to try some alternatives, although I'm very much afraid we're not going to strike gold.

[zoharma]

@karsa-mistmere thank you for the detailed response.

You can check this one on Wordpress CMS https://wordpress.org/documentation/article/list-view/

Google Docs on desktop have a similar functionality and they use the classic list icon (previously in a square, recently without) although I don't think it does the trick correctly. On mobile they just call it "Document outline"

[jguddas]

source

[zoharma]

Thanks @jguddas. I think it could be useful addition, although the issue with an icon within a square is that it looks strange if other icons with around it are not in a square as well. Google has since migrated from list-square to list.

I can use a list, but I find it confusing in an app. Especially if the users can have a way to add a list in a text editor.

Update: I noticed Google Material Icons has a difference between list and list-bulleted. Not sure if regular users would see the difference but this means they are not using the same icon for these two distinct actions.