Panel Left Header Key icon

Use the Panel Left Header Key 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 { PanelLeftHeaderKey24Regular, PanelLeftHeaderKey24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PanelLeftHeaderKey24Regular aria-label="Panel Left Header Key" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_panel_left_header_key_24_regular.svg" width="24" height="24" alt="Panel Left Header Key">

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="M5.25 4C3.45507 4 2 5.45507 2 7.25V16.75C2 18.5449 3.45508 20 5.25 20H11.1991C11.2806 19.8441 11.3859 19.6999 11.5126 19.5732L12.5858 18.5H9.5V10.5H20.5V11.1115C21.044 11.235 21.5506 11.457 22 11.7578V7.25C22 5.45507 20.5449 4 18.75 4H5.25ZM20.5 9H9.5V5.5H18.75C19.7165 5.5 20.5 6.2835 20.5 7.25V9ZM8 5.5V18.5H5.25C4.2835 18.5 3.5 17.7165 3.5 16.75V7.25C3.5 6.2835 4.2835 5.5 5.25 5.5H8ZM19.5 19C21.433 19 23 17.433 23 15.5C23 13.567 21.433 12 19.5 12C17.567 12 16 13.567 16 15.5C16 15.8161 16.0419 16.1223 16.1204 16.4136C16.0666 16.4452 16.0159 16.4841 15.9697 16.5303L12.2197 20.2803C12.079 20.421 12 20.6117 12 20.8107V22.25C12 22.6642 12.3358 23 12.75 23H14.5C14.7761 23 15 22.7761 15 22.5V22H16C16.2761 22 16.5 21.7761 16.5 21.5V20.5H17.5C17.7761 20.5 18 20.2761 18 20V19H19.5ZM21 15C21 15.5523 20.5523 16 20 16C19.4477 16 19 15.5523 19 15C19 14.4477 19.4477 14 20 14C20.5523 14 21 14.4477 21 15Z" 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_header_key_24_regular.svg";

Details

Keywords

uiworkspacenavigationpanel