Arrow Hook Down Left icon

Use the Arrow Hook Down 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 { ArrowHookDownLeft24Regular, ArrowHookDownLeft24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_hook_down_left_24_regular.svg" width="24" height="24" alt="Arrow Hook Down 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 4.75C7 4.33579 7.33579 4 7.75 4H14C15.9786 4 17.5041 4.82266 18.5198 6.07425C19.5207 7.30739 20 8.9201 20 10.5C20 12.0799 19.5207 13.6926 18.5198 14.9258C17.5041 16.1773 15.9786 17 14 17H7.56066L10.0303 19.4697C10.3232 19.7626 10.3232 20.2374 10.0303 20.5303C9.73744 20.8232 9.26256 20.8232 8.96967 20.5303L5.21967 16.7803C4.92678 16.4874 4.92678 16.0126 5.21967 15.7197L8.96967 11.9697C9.26256 11.6768 9.73744 11.6768 10.0303 11.9697C10.3232 12.2626 10.3232 12.7374 10.0303 13.0303L7.56066 15.5H14C15.5214 15.5 16.6209 14.8852 17.3552 13.9805C18.1043 13.0574 18.5 11.7951 18.5 10.5C18.5 9.2049 18.1043 7.94261 17.3552 7.0195C16.6209 6.11484 15.5214 5.5 14 5.5H7.75C7.33579 5.5 7 5.16421 7 4.75Z" 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_down_left_24_regular.svg";

Details

Keywords

arrowpointdirection