Person Arrow Right icon
Used to represent a person entering a meeting. The Person Arrow Right 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 Right 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 { PersonArrowRight24Regular, PersonArrowRight24Filled } from "@fluentui/react-icons";
export function Example() {
return <PersonArrowRight24Regular aria-label="Person Arrow Right" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_person_arrow_right_24_regular.svg" width="24" height="24" alt="Person Arrow Right"> 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.3139 15.5002C11.4862 14.9667 11.7257 14.4634 12.0222 14.0002H4.25278C3.01076 14.0002 2.00391 15.007 2.00391 16.2491V16.8267C2.00391 17.7195 2.32242 18.583 2.90219 19.2619C4.46849 21.0962 6.8545 22.0013 10.0004 22.0013C10.9316 22.0013 11.7963 21.922 12.593 21.7628C12.2338 21.3496 11.9259 20.8905 11.6792 20.3956C11.1557 20.466 10.5963 20.5013 10.0004 20.5013C7.26206 20.5013 5.29618 19.7555 4.04287 18.2878C3.69502 17.8805 3.50391 17.3624 3.50391 16.8267V16.2491C3.50391 15.8355 3.83919 15.5002 4.25278 15.5002H11.3139ZM10.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.50488ZM23.0004 17.5002C23.0004 20.5378 20.5379 23.0002 17.5004 23.0002C14.4628 23.0002 12.0004 20.5378 12.0004 17.5002C12.0004 14.4627 14.4628 12.0002 17.5004 12.0002C20.5379 12.0002 23.0004 14.4627 23.0004 17.5002ZM18.3539 14.6467C18.1587 14.4515 17.8421 14.4515 17.6468 14.6467C17.4516 14.842 17.4516 15.1586 17.6468 15.3538L19.2932 17.0002H15.0004C14.7242 17.0002 14.5004 17.2241 14.5004 17.5002C14.5004 17.7764 14.7242 18.0002 15.0004 18.0002H19.2933L17.6468 19.6467C17.4516 19.842 17.4516 20.1586 17.6468 20.3538C17.8421 20.5491 18.1587 20.5491 18.3539 20.3538L20.8539 17.8538C20.9071 17.8007 20.9458 17.7385 20.97 17.6723C20.9886 17.6214 20.9992 17.5666 21.0003 17.5095L21.0004 17.5002C21.0004 17.4231 20.9829 17.35 20.9517 17.2848C20.9364 17.2527 20.9175 17.2219 20.8949 17.1931C20.881 17.1753 20.8659 17.1584 20.8498 17.1426L18.3539 14.6467Z" 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_right_24_regular.svg";Details
| Name | Person Arrow Right |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_person_arrow_right_24_regular.svg |
| Filled file | ic_fluent_person_arrow_right_24_filled.svg |
| React components | PersonArrowRight24Regular, PersonArrowRight24Filled |
| License | MIT (© Microsoft Corporation) |