Branch icon

Use the Branch 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 { Branch24Regular, Branch24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M4 5.5C4 3.567 5.567 2 7.5 2C9.433 2 11 3.567 11 5.5C11 7.08956 9.94036 8.43162 8.48893 8.85834C9.17679 11.1112 11.272 12.75 13.75 12.75H14.0805C14.4239 11.1774 15.8244 10 17.5 10C19.433 10 21 11.567 21 13.5C21 15.433 19.433 17 17.5 17C15.8244 17 14.4239 15.8226 14.0805 14.25H13.75C11.519 14.25 9.53183 13.2063 8.25 11.5805L8.25 15.0805C9.82259 15.4239 11 16.8244 11 18.5C11 20.433 9.433 22 7.5 22C5.567 22 4 20.433 4 18.5C4 16.8244 5.17741 15.4239 6.75 15.0805L6.75 8.91946C5.17741 8.57612 4 7.17556 4 5.5ZM7.5 3.5C6.39543 3.5 5.5 4.39543 5.5 5.5C5.5 6.60457 6.39543 7.5 7.5 7.5C8.60457 7.5 9.5 6.60457 9.5 5.5C9.5 4.39543 8.60457 3.5 7.5 3.5ZM7.5 16.5C6.39543 16.5 5.5 17.3954 5.5 18.5C5.5 19.6046 6.39543 20.5 7.5 20.5C8.60457 20.5 9.5 19.6046 9.5 18.5C9.5 17.3954 8.60457 16.5 7.5 16.5ZM15.5 13.5C15.5 14.6046 16.3954 15.5 17.5 15.5C18.6046 15.5 19.5 14.6046 19.5 13.5C19.5 12.3954 18.6046 11.5 17.5 11.5C16.3954 11.5 15.5 12.3954 15.5 13.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/branch_24_regular.svg";

Details

Keywords

code