Phone Arrow Right icon
Used to represent a physical or digital mobile phone scenarios. The Phone 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 Phone 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 { PhoneArrowRight24Regular, PhoneArrowRight24Filled } from "@fluentui/react-icons";
export function Example() {
return <PhoneArrowRight24Regular aria-label="Phone Arrow Right" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_phone_arrow_right_24_regular.svg" width="24" height="24" alt="Phone 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="M13.75 2C14.9926 2 16 3.00736 16 4.25L16.0007 10.0189C15.4812 10.0584 14.9788 10.1589 14.5006 10.3133L14.5 4.25C14.5 3.83579 14.1642 3.5 13.75 3.5H6.25C5.83579 3.5 5.5 3.83579 5.5 4.25V19.75C5.5 20.1642 5.83579 20.5 6.25 20.5L11.3768 20.5009C11.8385 21.0912 12.4 21.5998 13.036 22.0011L6.25 22C5.00736 22 4 20.9926 4 19.75V4.25C4 3.00736 5.00736 2 6.25 2H13.75ZM16.5 11C19.5376 11 22 13.4624 22 16.5C22 19.5376 19.5376 22 16.5 22C13.4624 22 11 19.5376 11 16.5C11 13.4624 13.4624 11 16.5 11ZM16.7157 13.5886L16.6464 13.6464L16.5886 13.7157C16.4705 13.8862 16.4705 14.1138 16.5886 14.2843L16.6464 14.3536L18.2917 15.999L13.4937 16L13.4038 16.0081C13.1997 16.0451 13.0388 16.206 13.0018 16.4101L12.9937 16.5L13.0018 16.5899C13.0388 16.794 13.1997 16.9549 13.4038 16.9919L13.4937 17L18.2937 16.999L16.6464 18.6464L16.5886 18.7157C16.4536 18.9106 16.4729 19.18 16.6464 19.3536C16.82 19.5271 17.0894 19.5464 17.2843 19.4114L17.3536 19.3536L19.8832 16.8212L19.9202 16.7711L19.9622 16.691L19.9882 16.6083L19.9981 16.5444V16.4557L19.9883 16.392L19.9624 16.3094L19.9205 16.2293L19.8832 16.1788L17.3536 13.6464L17.2843 13.5886C17.1382 13.4873 16.9501 13.4729 16.7919 13.5452L16.7157 13.5886ZM10.0767 17.5019C10.1576 18.0246 10.3008 18.5268 10.4984 19.0006L8.75113 19.0038C8.33692 19.0044 8.00062 18.6691 8 18.2549C7.99938 17.8407 8.33466 17.5044 8.74887 17.5038L10.0767 17.5019Z" 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/phone_arrow_right_24_regular.svg";Details
| Name | Phone Arrow Right |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_phone_arrow_right_24_regular.svg |
| Filled file | ic_fluent_phone_arrow_right_24_filled.svg |
| React components | PhoneArrowRight24Regular, PhoneArrowRight24Filled |
| License | MIT (© Microsoft Corporation) |