Arrow Hook Up Left icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_hook_up_left_24_regular.svg" width="24" height="24" alt="Arrow Hook Up 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="M7 19.25C7 19.6642 7.33579 20 7.75 20H14C15.9786 20 17.5041 19.1773 18.5198 17.9258C19.5207 16.6926 20 15.0799 20 13.5C20 11.9201 19.5207 10.3074 18.5198 9.07425C17.5041 7.82266 15.9786 7 14 7H7.56066L10.0303 4.53033C10.3232 4.23744 10.3232 3.76256 10.0303 3.46967C9.73744 3.17678 9.26256 3.17678 8.96967 3.46967L5.21967 7.21967C4.92678 7.51256 4.92678 7.98744 5.21967 8.28033L8.96967 12.0303C9.26256 12.3232 9.73744 12.3232 10.0303 12.0303C10.3232 11.7374 10.3232 11.2626 10.0303 10.9697L7.56066 8.5H14C15.5214 8.5 16.6209 9.11484 17.3552 10.0195C18.1043 10.9426 18.5 12.2049 18.5 13.5C18.5 14.7951 18.1043 16.0574 17.3552 16.9805C16.6209 17.8852 15.5214 18.5 14 18.5H7.75C7.33579 18.5 7 18.8358 7 19.25Z" 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_left_24_regular.svg";

Details

Keywords

arrowpointdirection