Patch icon

Use the Patch 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 { Patch24Regular, Patch24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M11.9998 12.7496C12.414 12.7496 12.7498 12.4138 12.7498 11.9996C12.7498 11.5854 12.414 11.2496 11.9998 11.2496C11.5855 11.2496 11.2498 11.5854 11.2498 11.9996C11.2498 12.4138 11.5855 12.7496 11.9998 12.7496ZM10.2498 11.9996C10.2498 12.4138 9.91397 12.7496 9.49976 12.7496C9.08554 12.7496 8.74976 12.4138 8.74976 11.9996C8.74976 11.5854 9.08554 11.2496 9.49976 11.2496C9.91397 11.2496 10.2498 11.5854 10.2498 11.9996ZM14.4998 12.7496C14.914 12.7496 15.2498 12.4138 15.2498 11.9996C15.2498 11.5854 14.914 11.2496 14.4998 11.2496C14.0855 11.2496 13.7498 11.5854 13.7498 11.9996C13.7498 12.4138 14.0855 12.7496 14.4998 12.7496ZM12.7498 14.4996C12.7498 14.9138 12.414 15.2496 11.9998 15.2496C11.5855 15.2496 11.2498 14.9138 11.2498 14.4996C11.2498 14.0854 11.5855 13.7496 11.9998 13.7496C12.414 13.7496 12.7498 14.0854 12.7498 14.4996ZM11.9998 10.2496C12.414 10.2496 12.7498 9.91384 12.7498 9.49962C12.7498 9.08541 12.414 8.74962 11.9998 8.74962C11.5855 8.74962 11.2498 9.08541 11.2498 9.49962C11.2498 9.91384 11.5855 10.2496 11.9998 10.2496ZM3.23731 18.2977C1.9681 17.0285 1.9681 14.9707 3.23731 13.7015L13.7018 3.23706C14.971 1.96785 17.0288 1.96786 18.298 3.23706L20.7624 5.70153C22.0316 6.97073 22.0316 9.02852 20.7624 10.2977L10.298 20.7622C9.02876 22.0314 6.97098 22.0314 5.70177 20.7622L3.23731 18.2977ZM4.29797 14.7622C3.61455 15.4456 3.61455 16.5536 4.29797 17.2371L6.76243 19.7015C7.44585 20.3849 8.55389 20.3849 9.2373 19.7015L10.939 17.9998L5.99969 13.0605L4.29797 14.7622ZM16.939 11.9998L11.9997 7.06046L7.06035 11.9998L11.9997 16.9391L16.939 11.9998ZM17.9997 10.9391L19.7018 9.23706C20.3852 8.55364 20.3852 7.4456 19.7018 6.76219L17.2373 4.29772C16.5539 3.6143 15.4459 3.6143 14.7624 4.29772L13.0604 5.9998L17.9997 10.9391ZM10.2319 5.2927L9.23706 4.29783C8.55364 3.61441 7.4456 3.61441 6.76219 4.29783L4.29772 6.7623C3.6143 7.44571 3.6143 8.55376 4.29772 9.23717L5.29258 10.232L4.23192 11.2927L3.23706 10.2978C1.96785 9.02863 1.96786 6.97084 3.23706 5.70164L5.70153 3.23717C6.97073 1.96797 9.02851 1.96797 10.2977 3.23717L11.2926 4.23204L10.2319 5.2927ZM12.7068 19.7676L13.7015 20.7623C14.9707 22.0315 17.0285 22.0315 18.2977 20.7623L20.7622 18.2978C22.0314 17.0286 22.0314 14.9708 20.7622 13.7016L19.7675 12.7069L18.7068 13.7676L19.7015 14.7623C20.3849 15.4457 20.3849 16.5538 19.7015 17.2372L17.2371 19.7016C16.5536 20.3851 15.4456 20.3851 14.7622 19.7016L13.7675 18.7069L12.7068 19.7676Z" 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/patch_24_regular.svg";

Details

Keywords

adhesivestripfixupdatetemporarymedicalcare