Person Arrow Left icon
Used to represent a person leaving a meeting. The Person Arrow Left 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 Person Arrow Left 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 { PersonArrowLeft24Regular, PersonArrowLeft24Filled } from "@fluentui/react-icons";
export function Example() {
return <PersonArrowLeft24Regular aria-label="Person Arrow Left" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_person_arrow_left_24_regular.svg" width="24" height="24" alt="Person Arrow Left"> 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="M17.5004 12.0003C20.5379 12.0003 23.0004 14.4627 23.0004 17.5003C23.0004 20.5378 20.5379 23.0003 17.5004 23.0003C14.4628 23.0003 12.0004 20.5378 12.0004 17.5003C12.0004 14.4627 14.4628 12.0003 17.5004 12.0003ZM12.0226 13.9996C11.7259 14.4629 11.4864 14.9663 11.314 15.4999L4.25391 15.5002C3.83969 15.5002 3.50391 15.836 3.50391 16.2502V17.1575C3.50391 17.8132 3.7899 18.4362 4.28707 18.8636C5.54516 19.9453 7.44117 20.5013 10.0004 20.5013C10.5992 20.5013 11.1618 20.4709 11.6885 20.4104C11.9374 20.9105 12.2512 21.3743 12.6175 21.7908C11.8153 21.9315 10.9423 22.0013 10.0004 22.0013C7.11087 22.0013 4.87205 21.3447 3.30918 20.001C2.48056 19.2887 2.00391 18.2503 2.00391 17.1575V16.2502C2.00391 15.0075 3.01127 14.0002 4.25391 14.0002L12.0226 13.9996ZM16.7196 14.5889L16.6503 14.6467L14.1347 17.163L14.0941 17.2137L14.0594 17.2711L14.0272 17.3491L14.0156 17.3923L14.0044 17.4787L14.0082 17.5661L14.0271 17.6513L14.0591 17.729L14.0837 17.7714L14.1346 17.8374L16.6503 20.3538C16.8456 20.5491 17.1622 20.5491 17.3574 20.3538C17.531 20.1802 17.5503 19.9108 17.4153 19.716L17.3574 19.6467L15.7114 18.0003H20.5004C20.7458 18.0003 20.95 17.8234 20.9923 17.5901L21.0004 17.5003C21.0004 17.2548 20.8235 17.0507 20.5902 17.0083L20.5004 17.0003H15.7114L17.3574 15.3538C17.531 15.1802 17.5503 14.9108 17.4153 14.716L17.3574 14.6467C17.1839 14.4731 16.9145 14.4539 16.7196 14.5889ZM10.0004 2.00488C12.7618 2.00488 15.0004 4.24346 15.0004 7.00488C15.0004 9.76631 12.7618 12.0049 10.0004 12.0049C7.23894 12.0049 5.00036 9.76631 5.00036 7.00488C5.00036 4.24346 7.23894 2.00488 10.0004 2.00488ZM10.0004 3.50488C8.06737 3.50488 6.50036 5.07189 6.50036 7.00488C6.50036 8.93788 8.06737 10.5049 10.0004 10.5049C11.9334 10.5049 13.5004 8.93788 13.5004 7.00488C13.5004 5.07189 11.9334 3.50488 10.0004 3.50488Z" 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/person_arrow_left_24_regular.svg";Details
| Name | Person Arrow Left |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_person_arrow_left_24_regular.svg |
| Filled file | ic_fluent_person_arrow_left_24_filled.svg |
| React components | PersonArrowLeft24Regular, PersonArrowLeft24Filled |
| License | MIT (© Microsoft Corporation) |