Branch Fork Hint icon

Use the Branch Fork Hint 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 { BranchForkHint24Regular, BranchForkHint24Filled } from "@fluentui/react-icons";

export function Example() {
  return <BranchForkHint24Regular aria-label="Branch Fork Hint" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_branch_fork_hint_24_regular.svg" width="24" height="24" alt="Branch Fork Hint">

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="M6.5 2C4.567 2 3 3.567 3 5.5C3 7.08551 4.05426 8.42479 5.5 8.85506V14.25C5.5 14.6642 5.83579 15 6.25 15C6.66421 15 7 14.6642 7 14.25V13H13.25C15.3211 13 17 11.3211 17 9.25V8.96456C18.6961 8.72194 20 7.26324 20 5.5C20 3.567 18.433 2 16.5 2C14.567 2 13 3.567 13 5.5C13 7.08551 14.0543 8.42479 15.5 8.85506V9.25C15.5 10.4926 14.4926 11.5 13.25 11.5H7V8.96456C8.69615 8.72194 10 7.26324 10 5.5C10 3.567 8.433 2 6.5 2ZM4.5 5.5C4.5 4.39543 5.39543 3.5 6.5 3.5C7.60457 3.5 8.5 4.39543 8.5 5.5C8.5 6.60457 7.60457 7.5 6.5 7.5C5.39543 7.5 4.5 6.60457 4.5 5.5ZM16.5 3.5C17.6046 3.5 18.5 4.39543 18.5 5.5C18.5 6.60457 17.6046 7.5 16.5 7.5C15.3954 7.5 14.5 6.60457 14.5 5.5C14.5 4.39543 15.3954 3.5 16.5 3.5ZM5.34149 16.8845C5.67842 16.6436 5.75625 16.1751 5.51531 15.8382C5.27438 15.5012 4.80593 15.4234 4.46899 15.6643C4.31402 15.7752 4.16643 15.8999 4.028 16.0383C3.67236 16.394 3.40835 16.8088 3.23763 17.252C3.08874 17.6386 3.28138 18.0726 3.66791 18.2215C4.05444 18.3704 4.48848 18.1777 4.63737 17.7912C4.7342 17.5398 4.88408 17.3036 5.08866 17.099C5.16863 17.019 5.25325 16.9476 5.34149 16.8845ZM8.53103 15.6643C8.19409 15.4234 7.72564 15.5012 7.48471 15.8382C7.24377 16.1751 7.3216 16.6436 7.65853 16.8845C7.74678 16.9476 7.8314 17.019 7.91136 17.099C8.11594 17.3036 8.26582 17.5398 8.36265 17.7912C8.51154 18.1777 8.94558 18.3704 9.33211 18.2215C9.71864 18.0726 9.91128 17.6386 9.76239 17.252C9.59167 16.8088 9.32766 16.394 8.97202 16.0383C8.83359 15.8999 8.686 15.7752 8.53103 15.6643ZM4.77691 19.519C4.56732 19.1617 4.10779 19.042 3.75052 19.2516C3.39324 19.4612 3.27352 19.9207 3.48311 20.278C3.63107 20.5302 3.81291 20.7672 4.028 20.9823C4.30618 21.2605 4.62083 21.4828 4.95724 21.6483C5.32894 21.831 5.77844 21.6779 5.96122 21.3062C6.144 20.9345 5.99085 20.485 5.61914 20.3022C5.42847 20.2084 5.24896 20.082 5.08866 19.9217C4.96457 19.7976 4.86086 19.6621 4.77691 19.519ZM9.51691 20.278C9.7265 19.9207 9.60678 19.4612 9.24951 19.2516C8.89223 19.042 8.4327 19.1617 8.22311 19.519C8.13916 19.6621 8.03545 19.7976 7.91136 19.9217C7.75107 20.082 7.57155 20.2084 7.38087 20.3022C7.00917 20.485 6.85602 20.9345 7.03879 21.3062C7.22157 21.6779 7.67107 21.831 8.04278 21.6483C8.37919 21.4828 8.69384 21.2605 8.97202 20.9823C9.18711 20.7672 9.36895 20.5302 9.51691 20.278Z" 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/branch_fork_hint_24_regular.svg";

Details

Keywords

code