Shape Intersect icon

Use the Shape Intersect 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 { ShapeIntersect24Regular, ShapeIntersect24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M2 5.25C2 3.45507 3.45507 2 5.25 2H13.25C15.0449 2 16.5 3.45507 16.5 5.25V7.5H18.75C20.5449 7.5 22 8.95507 22 10.75V18.75C22 20.5449 20.5449 22 18.75 22H10.75C8.95507 22 7.5 20.5449 7.5 18.75V16.5H5.25C3.45507 16.5 2 15.0449 2 13.25V5.25ZM15 5.25C15 4.2835 14.2165 3.5 13.25 3.5H5.25C4.2835 3.5 3.5 4.2835 3.5 5.25V13.25C3.5 14.2165 4.2835 15 5.25 15H7.5V10.75C7.5 10.4415 7.54298 10.143 7.62329 9.86027C7.62924 9.83933 7.63539 9.81847 7.64175 9.79771C7.95665 8.76861 8.76861 7.95665 9.79771 7.64175C10.0989 7.54959 10.4186 7.5 10.75 7.5H15V5.25ZM9 14.5608V15H10.4395L15 10.4395V9H14.5608L9 14.5608ZM12.4395 9H10.75C10.6822 9 10.6152 9.00386 10.5494 9.01137L9.01137 10.5494C9.00386 10.6152 9 10.6822 9 10.75V12.4395L12.4395 9ZM16.5 9V13.25C16.5 15.0449 15.0449 16.5 13.25 16.5H9V18.75C9 19.7165 9.7835 20.5 10.75 20.5H18.75C19.7165 20.5 20.5 19.7165 20.5 18.75V10.75C20.5 9.7835 19.7165 9 18.75 9H16.5ZM12.5608 15H13.25C14.2165 15 15 14.2165 15 13.25V12.5608L12.5608 15Z" 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_intersect_24_regular.svg";

Details

Keywords

canvaseditcreateunionsubtractmultiplesquare