Layer Diagonal Person icon

Use the Layer Diagonal Person 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 { LayerDiagonalPerson24Regular, LayerDiagonalPerson24Filled } from "@fluentui/react-icons";

export function Example() {
  return <LayerDiagonalPerson24Regular aria-label="Layer Diagonal Person" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_layer_diagonal_person_24_regular.svg" width="24" height="24" alt="Layer Diagonal Person">

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="M11.4948 3.54669C11.9837 3.36976 12.5 3.73196 12.5 4.25194V4.97174L14 4.42895V4.25194C14 2.69202 12.4512 1.60541 10.9844 2.1362L4.14414 4.61138C2.85728 5.07704 2 6.29894 2 7.66746V13.7491C2 15.3035 3.5378 16.388 5 15.8705V14.2753L4.5052 14.4544C4.01625 14.6313 3.5 14.2691 3.5 13.7491V7.66746C3.5 6.93056 3.96161 6.27262 4.65454 6.02188L11.4948 3.54669ZM15.4948 6.54669C15.9837 6.36976 16.5 6.73197 16.5 7.25194V7.97174L18 7.42895V7.25194C18 5.69202 16.4512 4.60541 14.9844 5.1362L7.81427 7.73075C6.72539 8.12477 6 9.15868 6 10.3167V16.7491C6 18.3035 7.5378 19.388 9 18.8705V17.2753L8.5052 17.4544C8.01625 17.6313 7.5 17.2691 7.5 16.7491V10.3167C7.5 9.7903 7.82972 9.32034 8.32467 9.14124L15.4948 6.54669ZM20.5 10.252C20.5 9.73201 19.9837 9.36981 19.4948 9.54673L11.9948 12.2607C11.6978 12.3681 11.5 12.6501 11.5 12.9659V19.7492C11.5 20.2691 12.0163 20.6314 12.5052 20.4544L13.0203 20.268C13.0717 20.7617 13.2209 21.2482 13.4752 21.6986L13.0156 21.8649C11.5488 22.3957 10 21.3091 10 19.7492V12.9659C10 12.0185 10.5935 11.1725 11.4844 10.8502L18.9844 8.13624C20.4512 7.60545 22 8.69206 22 10.252V14.5C22 13.3106 21.4067 12.2598 20.5 11.6273V10.252ZM21 14.5C21 15.8807 19.8807 17 18.5 17C17.1193 17 16 15.8807 16 14.5C16 13.1193 17.1193 12 18.5 12C19.8807 12 21 13.1193 21 14.5ZM23 19.875C23 21.4315 21.7143 23 18.5 23C15.2857 23 14 21.4374 14 19.875V19.772C14 18.7929 14.7937 18 15.7727 18H21.2273C22.2063 18 23 18.793 23 19.772V19.875Z" 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/layer_diagonal_person_24_regular.svg";

Details

Keywords

workspacecollectiontabsdesktopcollaboration