Phone Header Arrow Up icon

Use the Phone Header Arrow Up 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 { PhoneHeaderArrowUp24Regular, PhoneHeaderArrowUp24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PhoneHeaderArrowUp24Regular aria-label="Phone Header Arrow Up" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_phone_header_arrow_up_24_regular.svg" width="24" height="24" alt="Phone Header Arrow Up">

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="M15.75 2C16.9926 2 18 3.00736 18 4.25V19.75C18 20.9926 16.9926 22 15.75 22H8.25C7.00736 22 6 20.9926 6 19.75V4.25C6 3.00736 7.00736 2 8.25 2H15.75ZM15.75 3.5H8.25C7.83579 3.5 7.5 3.83579 7.5 4.25V19.75C7.5 20.1642 7.83579 20.5 8.25 20.5H15.75C16.1642 20.5 16.5 20.1642 16.5 19.75V4.25C16.5 3.83579 16.1642 3.5 15.75 3.5ZM14.75 5C15.1642 5 15.5 5.33579 15.5 5.75C15.5 6.16421 15.1642 6.5 14.75 6.5H9.25C8.83579 6.5 8.5 6.16421 8.5 5.75C8.5 5.33579 8.83579 5 9.25 5H14.75ZM12.75 10.5352L14.0249 11.7855C14.3206 12.0755 14.7955 12.0709 15.0855 11.7751C15.3755 11.4794 15.3709 11.0045 15.0751 10.7145L12.5259 8.21453C12.3839 8.07522 12.1923 7.99806 11.9933 8.00004C11.7944 8.00201 11.6044 8.08295 11.4651 8.22505L9.01512 10.7251C8.7252 11.0209 8.73 11.4957 9.02583 11.7857C9.32167 12.0756 9.79652 12.0708 10.0864 11.7749L11.25 10.5876V14.25C11.25 14.6642 11.5858 15 12 15C12.4142 15 12.75 14.6642 12.75 14.25V10.5352Z" 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_header_arrow_up_24_regular.svg";

Details

Keywords

browsersearchlocationadjustmentmovetop