Panel Left Expand icon
Used to represent the plethora of secondary, elevated panels in UI. Contains direction and action variants. The Panel Left Expand icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Panel Left Expand icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { PanelLeftExpand24Regular, PanelLeftExpand24Filled } from "@fluentui/react-icons";
export function Example() {
return <PanelLeftExpand24Regular aria-label="Panel Left Expand" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_panel_left_expand_24_regular.svg" width="24" height="24" alt="Panel Left Expand"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.1925 14.7512C14.4696 15.059 14.9438 15.084 15.2517 14.807L17.7517 12.5575C17.9098 12.4153 18 12.2127 18 12.0001C18 11.7876 17.9098 11.585 17.7517 11.4428L15.2517 9.19331C14.9438 8.91628 14.4696 8.94123 14.1925 9.24904C13.9154 9.55686 13.9404 10.031 14.2483 10.308L15.2955 11.2503L11.75 11.2503C11.3358 11.2503 11 11.586 11 12.0001C11 12.4143 11.3358 12.75 11.75 12.75H15.2955L14.2483 13.6923C13.9404 13.9693 13.9154 14.4434 14.1925 14.7512ZM2 6.75C2 5.23122 3.23122 4 4.75 4H19.25C20.7688 4 22 5.23122 22 6.75V17.25C22 18.7688 20.7688 20 19.25 20H4.75C3.23122 20 2 18.7688 2 17.25V6.75ZM4.75 5.5C4.05964 5.5 3.5 6.05964 3.5 6.75V17.25C3.5 17.9404 4.05964 18.5 4.75 18.5H8.00427V5.5H4.75ZM9.50427 5.5V18.5H19.25C19.9404 18.5 20.5 17.9404 20.5 17.25V6.75C20.5 6.05964 19.9404 5.5 19.25 5.5H9.50427Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/panel_left_expand_24_regular.svg";Details
| Name | Panel Left Expand |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_panel_left_expand_24_regular.svg |
| Filled file | ic_fluent_panel_left_expand_24_filled.svg |
| React components | PanelLeftExpand24Regular, PanelLeftExpand24Filled |
| License | MIT (© Microsoft Corporation) |