The Heroicons bars 3 bottom right icon depicts a stack of three horizontal lines aligned to the bottom right, commonly used to represent a menu, navigation, or settings that are positioned in that corner of the interface.
Common uses
- Bottom-right corner menu trigger
- Settings panel access
- Hamburger menu alternative
Use it in React
Install
npm i @heroicons/reactImport & render
import { Bars3BottomRightIcon } from '@heroicons/react/24/outline';
<Bars3BottomRightIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<Bars3BottomRightIcon className="size-6" />24/solid
<Bars3BottomRightIcon className="size-6" />20/solid
<Bars3BottomRightIcon className="size-6" />16/solid
<Bars3BottomRightIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- bars3bottomrightmenu iconnavigation iconsettings iconhamburger menu
FAQ
- What does the bars 3 bottom right icon represent?
- It visually signifies a menu, navigation, or settings, typically located in the bottom right area of a user interface.
- How do I use this icon in React?
- You can import it using: import { Bars3BottomRightIcon } from '@heroicons/react/24/outline'. Then, use it as a React component.
- What is the license for this icon?
- The Heroicons library, including this icon, is released under the MIT license.
Related icons
The same idea in other libraries, and near matches in Heroicons.
Looking for something else? Search Heroicons and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →