The Tabler layout navbar collapse icon visually represents a navigation bar that can be collapsed or expanded, often used to manage space or provide a more compact interface.
Common uses
- Collapsible sidebar navigation
- Hiding/showing secondary menus
- Responsive navigation toggles
Use it in React
Install
npm i @tabler/icons-reactImport & render
import { IconLayoutNavbarCollapse } from '@tabler/icons-react';
<IconLayoutNavbarCollapse size={24} stroke={2} />Styles
Tabler ships this icon in 2 styles — each its own import:
outline
<IconLayoutNavbarCollapse size={24} stroke={2} />filled
<IconLayoutNavbarCollapseFilled size={24} stroke={2} />Details
- Library
- Tabler (5,093 icons)
- License
- MIT
- viewBox
0 0 24 24- Category
- Design
- Keywords
- gridasidecolumncolumnsmenunavigationlayoutnavbarcollapsecreativedesignnavigation collapsesidebar togglemenu expandlayout aside
FAQ
- What does the layout navbar collapse icon represent?
- It depicts a UI element where a navigation bar or sidebar can be toggled to show or hide its content, saving space.
- How do I use this icon in React?
- You can import and use it like this: import { IconLayoutNavbarCollapse } from '@tabler/icons-react'. Then render it as <IconLayoutNavbarCollapse />.
- What is the license for this icon?
- This icon is provided under the MIT license, allowing for free use in both personal and commercial projects.
Related icons
The same idea in other libraries, and near matches in Tabler.