Arrow Hook Up Right icon

Use the Arrow Hook Up 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 { ArrowHookUpRight24Regular, ArrowHookUpRight24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowHookUpRight24Regular aria-label="Arrow Hook Up Right" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_hook_up_right_24_regular.svg" width="24" height="24" alt="Arrow Hook Up 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="M10.5 18.5H16.25C16.6642 18.5 17 18.8358 17 19.25C17 19.6642 16.6642 20 16.25 20H10.5C6.91015 20 4 17.0899 4 13.5C4 9.91015 6.91015 7 10.5 7H16.4503L13.8336 4.38323C13.5407 4.09033 13.5407 3.61546 13.8336 3.32257C14.1264 3.02967 14.6013 3.02967 14.8942 3.32257L18.7765 7.2049C18.8762 7.30454 18.9419 7.42524 18.9738 7.55267C18.9909 7.61554 19 7.68171 19 7.75C19 7.96292 18.9113 8.15511 18.7688 8.29163L14.8887 12.1717C14.5958 12.4646 14.121 12.4646 13.8281 12.1717C13.5352 11.8788 13.5352 11.4039 13.8281 11.111L16.4391 8.5H10.5C7.73858 8.5 5.5 10.7386 5.5 13.5C5.5 16.2614 7.73858 18.5 10.5 18.5Z" 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/arrow_hook_up_right_24_regular.svg";

Details

Keywords

arrowpointdirection