Shape Subtract icon

Use the Shape Subtract 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 { ShapeSubtract24Regular, ShapeSubtract24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ShapeSubtract24Regular aria-label="Shape Subtract" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_shape_subtract_24_regular.svg" width="24" height="24" alt="Shape Subtract">

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="M5.25 2C3.45507 2 2 3.45507 2 5.25V13.25C2 13.3502 2.00454 13.4494 2.01342 13.5474C2.05999 14.0608 2.22595 14.5397 2.48332 14.9561C2.50649 14.9936 2.53041 15.0306 2.55505 15.0671C2.81334 15.4494 3.15084 15.7738 3.544 16.0168C3.96049 16.2741 4.43944 16.4401 4.95286 16.4866L4.95875 16.4871C5.0547 16.4956 5.15184 16.5 5.25 16.5H7.5V18.75C7.5 20.5449 8.95507 22 10.75 22H18.75C20.5449 22 22 20.5449 22 18.75V10.75C22 8.95507 20.5449 7.5 18.75 7.5H16.5V5.25C16.5 5.14983 16.4955 5.05072 16.4866 4.95286C16.4401 4.43944 16.2741 3.96049 16.0168 3.544C15.9936 3.50645 15.9696 3.46941 15.945 3.43289C15.6867 3.05062 15.3492 2.72625 14.9561 2.48332C14.5397 2.22595 14.0608 2.05999 13.5474 2.01342C13.5453 2.01324 13.5433 2.01305 13.5412 2.01287C13.4453 2.00435 13.3482 2 13.25 2H5.25ZM5.93945 3.5L3.5 5.93945V5.25C3.5 4.2835 4.2835 3.5 5.25 3.5H5.93945ZM3.5 8.06077L8.06077 3.5H9.93945L3.5 9.93945V8.06077ZM12.0608 3.5H13.25C13.4563 3.5 13.6543 3.53571 13.8382 3.60129L9.79771 7.64175C8.76861 7.95665 7.95665 8.76861 7.64175 9.79771L3.60129 13.8382C3.53571 13.6543 3.5 13.4563 3.5 13.25V12.0608L12.0608 3.5ZM14.8988 4.66201C14.9643 4.84578 15 5.04372 15 5.25V6.43945L13.9395 7.5H12.0608L14.8988 4.66201ZM7.5 12.0608V13.9395L6.43945 15H5.25C5.04372 15 4.84578 14.9643 4.66201 14.8988L7.5 12.0608ZM9 10.75C9 9.7835 9.7835 9 10.75 9H18.75C19.7165 9 20.5 9.7835 20.5 10.75V18.75C20.5 19.7165 19.7165 20.5 18.75 20.5H10.75C9.7835 20.5 9 19.7165 9 18.75V10.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/shape_subtract_24_regular.svg";

Details

Keywords

canvaseditcreateunionsubtractmultiplesquare