# Three bar icon should really be two different icons
**URL:** https://meta.discourse.org/t/three-bar-icon-should-really-be-two-different-icons/304437
**Category:** UX
**Tags:** sidebar
**Created:** [April 18, 2024, 11:24am UTC](https://meta.discourse.org/t/three-bar-icon-should-really-be-two-different-icons/304437 "2024-04-18T11:24:31Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@jidanni](https://meta.discourse.org/u/jidanni)
#### Post date: [April 18, 2024, 11:24am UTC](https://meta.discourse.org/t/three-bar-icon-should-really-be-two-different-icons/304437/1 "2024-04-18T11:24:31Z")
You know those three bars in the upper left corner,
Well normal users all know that it has two functions, to make the sidebar slide one way, and also make the sidebar slide the other way, all depending on sidebar state.
But we other abnormal users always have to click it a couple of times to get a hang of it. Furthermore a few days later we forget and well, go clicking it again…
I have a proposal: use slightly different icons in the two different states!
Yes, this is a common icon on the web. But Discourse could lead the way to making it more user friendly.
In fact, I do believe it is the single remaining “booby trapped” multi-functional icon.
So wicked that it does the opposite half the time… Can’t think of any other like it.
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [April 18, 2024, 11:35am UTC](https://meta.discourse.org/t/three-bar-icon-should-really-be-two-different-icons/304437/2 "2024-04-18T11:35:47Z")
I agree that the hamburger that means “toggle the sidebar” is confusing. I click it expecting something else to happen (I don’t know what) breaker every day.
Maybe these would be better
> **[Sliders Filled Icon (Classic Solid) — Free SVG Download | Font Awesome](https://fontawesome.com/icons/sliders?f=classic&s=solid)**
>
> Download the Sliders filled icon as a free SVG or PNG. A bold Classic Solid style icon for web and app projects.
> **[Toggle Off Filled Icon (Classic Solid) — Free SVG Download | Font Awesome](https://fontawesome.com/icons/toggle-off?f=classic&s=solid)**
>
> Download the Toggle Off filled icon as a free SVG or PNG. A bold Classic Solid style icon for settings panels, preference controls, and switch interfaces.
> **[Toggle On Filled Icon (Classic Solid) — Free SVG Download | Font Awesome](https://fontawesome.com/icons/toggle-on?f=classic&s=solid)**
>
> Download the Toggle On filled icon as a free SVG or PNG. A bold Classic Solid style icon for settings panels, preference controls, and switch interfaces.
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [April 18, 2024, 11:44am UTC](https://meta.discourse.org/t/three-bar-icon-should-really-be-two-different-icons/304437/3 "2024-04-18T11:44:46Z")
The hamburger opens a menu, as expected. Closing is unexpected action. How big real world issus is that, is the actual question now and answer for that gives quite obvious solution then.
---
### Author:  [@jidanni](https://meta.discourse.org/u/jidanni)
#### Post date: [April 18, 2024, 11:50am UTC](https://meta.discourse.org/t/three-bar-icon-should-really-be-two-different-icons/304437/4 "2024-04-18T11:50:02Z")
Wait. There has never been any confusion with the Chrome vertical three dot menu button in the upper right of my browser.
That is because after pushing the three dots, the menu is obviously either open or closed.
So the problem is one cannot tell if the three bars are associated with the sidebar, etc…
And double bummer is they even coyly slide around after one mistakenly presses it. Meaning one has to chase it around with the mouse to press it again. At least on Desktop.
Just like chasing around a barnyard chicken that knows its days are (hopefully) numbered.
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [April 18, 2024, 12:22pm UTC](https://meta.discourse.org/t/three-bar-icon-should-really-be-two-different-icons/304437/5 "2024-04-18T12:22:03Z")
> [@jidanni](#):
>
> one cannot tell if the three bars are associated with the sidebar
So? That one knows very well it is associated with a menu. And the sidebar is a menu.
I just don’t get where is the issue now? Name is wrong for ~~you~~ one?
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [April 19, 2024, 12:09am UTC](https://meta.discourse.org/t/three-bar-icon-should-really-be-two-different-icons/304437/6 "2024-04-19T00:09:45Z")
Aesthetics improvements. Is old timers are simply used to the old. Changing this to an toggle makes sense from a design point To make more intuitive.
I am sure this type of change could be made optional via a theme component or internal setting.
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [April 19, 2024, 1:13am UTC](https://meta.discourse.org/t/three-bar-icon-should-really-be-two-different-icons/304437/7 "2024-04-19T01:13:15Z")
Here’s a bare bones Theme Component to provide different icons in the two different states…
[https://github.com/denvergeeks/discourse-sidebar-toggle-x](https://github.com/denvergeeks/discourse-sidebar-toggle-x)
I used @PhilFoss code from this related post:
> [@Hamburger toggle](https://meta.discourse.org/t/hamburger-toggle/275948):
>
> Hello, I’m new to Discourse and hope this is a helpful observation- the hamburger menu never changes to a ‘close’ ui so I’ve found myself clicking it thinking I’m about to reveal more stuff, but it closes unexpected. It was already open. I’ve got a few lines of css that I plan on adding as a topic in the ‘theme component’ category when I have more access. Luckily the codebase has proper classes so we can hook onto those based on the sidebar showing or not showing. [discourse-hamburger-toggle] .…
---
### Author:  [@jidanni](https://meta.discourse.org/u/jidanni)
#### Post date: [April 19, 2024, 9:51am UTC](https://meta.discourse.org/t/three-bar-icon-should-really-be-two-different-icons/304437/8 "2024-04-19T09:51:38Z")
I just checked on a cell phone, and the three bars makes perfect sense there.
So the problem is only on desktop.
---
### Author:  [@PhilFoss](https://meta.discourse.org/u/PhilFoss)
#### Post date: [April 26, 2024, 1:47am UTC](https://meta.discourse.org/t/three-bar-icon-should-really-be-two-different-icons/304437/9 "2024-04-26T01:47:37Z")
Cool. Is /desktop folder only included for larger screens? I don’t see a media query in the css.
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [April 26, 2024, 3:43am UTC](https://meta.discourse.org/t/three-bar-icon-should-really-be-two-different-icons/304437/10 "2024-04-26T03:43:44Z")
Yes! That is correct!
---
### Author:  [@oshyan](https://meta.discourse.org/u/oshyan)
#### Post date: [May 5, 2026, 1:17am UTC](https://meta.discourse.org/t/three-bar-icon-should-really-be-two-different-icons/304437/11 "2026-05-05T01:17:48Z")
> [@pfaffman](#):
>
> I agree that the hamburger that means “toggle the sidebar” is confusing. I click it expecting something else to happen (I don’t know what) breaker every day.
I imagine that, like me, you expect it to open a temporary, drop-down or otherwise modal menu like basically every other app and website that ever adopted this icon for menus. And furthermore you might expect it to hold options somewhat less common than the primary nav, unless you’re on mobile. What Discourse has is a _sidebar_ and, when used at desktop resolutions, it’s a normal nav sidebar, not a menu. Collapsing it can be desirable for some users, but while I get that the hamburger-type icon is in some way reminiscent of the structure of the sidebar, it communicates something else by popular convention (and, in some cases, literal design guidelines from big companies).
I know I’m commenting on an old topic here, but I’m back to some Discourse work and noticing some of these UI and UX oddities that stand out to me. It frankly surprises me that this was adopted as the default and remains the icon for this function. It may seem minor but when an app or platform defies widespread design conventions it confuses people, and that affects their daily experience of that app or platform. I still click that button at least once a day expecting it to drop down options or something. I work on a 4k screen so I have no actual need to collapse the sidebar, well… ever. It’s a sort of muscle memory from so many other apps and websites.
Other tools have solved the expand/collapse sidebar behavior with a variety of icons, all of them clearer to me than this one. It’s worth reconsidering IMO.
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [May 5, 2026, 1:23am UTC](https://meta.discourse.org/t/three-bar-icon-should-really-be-two-different-icons/304437/12 "2026-05-05T01:23:33Z")
oh i guess i should post this here - pick your icons
> [@Dynamic Sidebar Icon](https://meta.discourse.org/t/discourse-dynamic-sidebar-icon/400765):
>
> information_sourceSummary Makes the sidebar toggle icon dynamic and customizablehammer_and_wrenchRepository [https://github.com/Lillinator/dynamic-sidebar-icon](https://github.com/Lillinator/dynamic-sidebar-icon)eyeglassesPreview [https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-icon](https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-icon)questionInstall Guide [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) Install this theme component woman_technologist:t2 Overview A lightweight Discourse theme component that dynamically changes the header’s sidebar toggl…
---
### Author:  [@oshyan](https://meta.discourse.org/u/oshyan)
#### Post date: [May 5, 2026, 4:16am UTC](https://meta.discourse.org/t/three-bar-icon-should-really-be-two-different-icons/304437/13 "2026-05-05T04:16:00Z")
Yes, it’s great work! I discovered it while searching in the forum for a relevant prior topic before I found this one. That said my concern is more fundamentally about out-of-the-box usability since many people don’t customize Discourse very much. I have long been an advocate for Discourse reaching outside of the techie community crowd more significantly, and it’s nice to see efforts that direction of late (free and cheap hosting, usability improvements, settings cleanup and categorization, etc.). And yet surprising to see something like this that, from my perspective, acts so counterintuitively to the established interface norms I interact with everyday in other apps, websites, and tools. It’s a small but meaningful thing.
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [May 5, 2026, 4:30am UTC](https://meta.discourse.org/t/three-bar-icon-should-really-be-two-different-icons/304437/14 "2026-05-05T04:30:46Z")
that’s totally fine and i got it. i just forgot to post a crumb for it in this topic and your bump in /latest reminded me. 😃 thank you for that!