Branch Compare icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M9 5.5C9 7.26324 7.69615 8.72194 6 8.96456V15C6 16.6569 7.34315 18 9 18H11.6893L10.7197 17.0303C10.4268 16.7374 10.4268 16.2626 10.7197 15.9697C11.0126 15.6768 11.4874 15.6768 11.7803 15.9697L14.0303 18.2197C14.3232 18.5126 14.3232 18.9874 14.0303 19.2803L11.7803 21.5303C11.4874 21.8232 11.0126 21.8232 10.7197 21.5303C10.4268 21.2374 10.4268 20.7626 10.7197 20.4697L11.6893 19.5H9C6.51472 19.5 4.5 17.4853 4.5 15V8.875L4.50026 8.85514C3.05438 8.42495 2 7.08561 2 5.5C2 3.567 3.567 2 5.5 2C7.433 2 9 3.567 9 5.5ZM7.5 5.5C7.5 4.39543 6.60457 3.5 5.5 3.5C4.39543 3.5 3.5 4.39543 3.5 5.5C3.5 6.60457 4.39543 7.5 5.5 7.5C6.60457 7.5 7.5 6.60457 7.5 5.5ZM22 18.5C22 20.433 20.433 22 18.5 22C16.567 22 15 20.433 15 18.5C15 16.7368 16.3039 15.2781 18 15.0354V9C18 7.34315 16.6569 6 15 6H13.0607L14.0303 6.96967C14.3232 7.26256 14.3232 7.73744 14.0303 8.03033C13.7374 8.32322 13.2626 8.32322 12.9697 8.03033L10.7197 5.78033C10.4268 5.48744 10.4268 5.01256 10.7197 4.71967L12.9697 2.46967C13.2626 2.17678 13.7374 2.17678 14.0303 2.46967C14.3232 2.76256 14.3232 3.23744 14.0303 3.53033L13.0607 4.5H15C17.4853 4.5 19.5 6.51472 19.5 9V15.125L19.4997 15.1449C20.9456 15.5751 22 16.9144 22 18.5ZM20.5 18.5C20.5 17.3954 19.6046 16.5 18.5 16.5C17.3954 16.5 16.5 17.3954 16.5 18.5C16.5 19.6046 17.3954 20.5 18.5 20.5C19.6046 20.5 20.5 19.6046 20.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/branch_compare_24_regular.svg";

Details

Keywords

code