Panel Left Contract icon
Used to represent the plethora of secondary, elevated panels in UI. Contains direction and action variants. The Panel Left Contract 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 Contract 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 { PanelLeftContract24Regular, PanelLeftContract24Filled } from "@fluentui/react-icons";
export function Example() {
return <PanelLeftContract24Regular aria-label="Panel Left Contract" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_panel_left_contract_24_regular.svg" width="24" height="24" alt="Panel Left Contract"> 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.8075 9.24902C14.5304 8.94121 14.0562 8.91625 13.7483 9.19328L11.2483 11.4428C11.0902 11.585 11 11.7875 11 12.0001C11 12.2127 11.0902 12.4152 11.2483 12.5574L13.7483 14.8069C14.0562 15.084 14.5304 15.059 14.8075 14.7512C15.0846 14.4434 15.0596 13.9693 14.7517 13.6922L13.7045 12.7499H17.25C17.6642 12.7499 18 12.4142 18 12.0001C18 11.586 17.6642 11.2503 17.25 11.2503H13.7045L14.7517 10.308C15.0596 10.0309 15.0846 9.55683 14.8075 9.24902ZM2 17.2506C2 18.7691 3.23122 20 4.75 20L19.25 20C20.7688 20 22 18.7691 22 17.2506V6.74937C22 5.23093 20.7688 4 19.25 4H4.75C3.23122 4 2 5.23094 2 6.74937L2 17.2506ZM4.75 18.5003C4.05964 18.5003 3.5 17.9408 3.5 17.2506L3.5 6.74937C3.5 6.05917 4.05964 5.49966 4.75 5.49966L8.00415 5.49966L8.00415 18.5003H4.75ZM9.50415 18.5003L9.50415 5.49966L19.25 5.49965C19.9404 5.49965 20.5 6.05917 20.5 6.74937L20.5 17.2506C20.5 17.9408 19.9404 18.5003 19.25 18.5003L9.50415 18.5003Z" 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_contract_24_regular.svg";Details
| Name | Panel Left Contract |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_panel_left_contract_24_regular.svg |
| Filled file | ic_fluent_panel_left_contract_24_filled.svg |
| React components | PanelLeftContract24Regular, PanelLeftContract24Filled |
| License | MIT (© Microsoft Corporation) |