Shape Union icon

Use the Shape Union 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 { ShapeUnion24Regular, ShapeUnion24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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 19.1416 7.56925 19.517 7.69617 19.8646C7.85515 20.3001 8.10462 20.692 8.42183 21.0176C8.43179 21.0278 8.44181 21.038 8.4519 21.0481C8.80546 21.4017 9.2401 21.6741 9.72554 21.8352C10.0476 21.9421 10.392 22 10.75 22H18.75C20.5449 22 22 20.5449 22 18.75V10.75C22 10.392 21.9421 10.0476 21.8352 9.72553C21.8249 9.69432 21.8141 9.66332 21.8028 9.63254C21.6338 9.17088 21.363 8.75826 21.0176 8.42183C20.692 8.10462 20.3001 7.85515 19.8646 7.69617C19.8407 7.68742 19.8166 7.67895 19.7924 7.67076C19.4652 7.56004 19.1146 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.60129L3.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.43945L6.43945 15H5.25C5.04372 15 4.84578 14.9643 4.66201 14.8988L14.8988 4.66201ZM15.0033 8.5575C15.0318 8.80656 15.2433 9 15.5 9H16.4395L9 16.4395V15.5C9 15.2433 8.80656 15.0318 8.5575 15.0033L15.0033 8.5575ZM18.5608 9H18.75C19.2178 9 19.6428 9.18359 19.9568 9.48266L9.48266 19.9568C9.18359 19.6428 9 19.2178 9 18.75V18.5608L18.5608 9ZM20.5 11.0608V12.9395L12.9395 20.5H11.0608L20.5 11.0608ZM20.5 15.0608V16.9395L16.9395 20.5H15.0608L20.5 15.0608ZM20.4661 19.0947C20.3282 19.7847 19.7847 20.3282 19.0947 20.4661L20.4661 19.0947Z" 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_union_24_regular.svg";

Details

Keywords

canvaseditcreateunionsubtractmultiplesquare