Form Multiple Collection icon

Use the Form Multiple Collection 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 { FormMultipleCollection24Regular, FormMultipleCollection24Filled } from "@fluentui/react-icons";

export function Example() {
  return <FormMultipleCollection24Regular aria-label="Form Multiple Collection" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_form_multiple_collection_24_regular.svg" width="24" height="24" alt="Form Multiple Collection">

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="M18.75 8.00001C20.5448 8.00001 21.9999 9.45518 22 11.25V18.75C22 20.5449 20.5449 22 18.75 22H11.25C9.45511 22 7.99998 20.5449 7.99998 18.75V11.25C8.00009 9.45521 9.45517 8.00007 11.25 8.00001H18.75ZM11.25 9.50001C10.2836 9.50007 9.50009 10.2836 9.49998 11.25V18.75C9.49998 19.7165 10.2835 20.5 11.25 20.5H18.75C19.7165 20.5 20.5 19.7165 20.5 18.75V11.25C20.4999 10.2836 19.7164 9.50001 18.75 9.50001H11.25ZM12.5 15.5C13.6045 15.5 14.4999 16.3955 14.5 17.5C14.5 18.6046 13.6046 19.5 12.5 19.5C11.3955 19.5 10.5 18.6045 10.5 17.5C10.5001 16.3956 11.3955 15.5001 12.5 15.5ZM18.75 17C19.1641 17 19.4999 17.3359 19.5 17.75C19.5 18.1642 19.1642 18.5 18.75 18.5H16.25C15.8358 18.5 15.5 18.1642 15.5 17.75C15.5001 17.3359 15.8359 17.0001 16.25 17H18.75ZM12.5 17C12.224 17.0001 12.0001 17.224 12 17.5C12 17.7761 12.2239 18 12.5 18C12.7761 18 13 17.7762 13 17.5C12.9999 17.224 12.7761 17 12.5 17ZM11.6543 2.11232C13.388 1.64787 15.1702 2.67646 15.6347 4.41017L16.3281 7.00001H14.7754L14.1855 4.79786C13.9352 3.86457 12.9754 3.31045 12.042 3.56056L4.79783 5.50196C3.86441 5.75221 3.3104 6.71203 3.56053 7.64552L5.50194 14.8897C5.6941 15.6068 6.30492 16.0981 7.00096 16.1748V17.6807C5.64119 17.6008 4.42472 16.6661 4.05272 15.2783L2.11131 8.03321C1.64705 6.29974 2.67584 4.51749 4.40916 4.05275L11.6543 2.11232ZM12.5 10.5C13.6045 10.5 14.4999 11.3955 14.5 12.5C14.5 13.6046 13.6046 14.5 12.5 14.5C11.3955 14.5 10.5 13.6045 10.5 12.5C10.5001 11.3956 11.3955 10.5001 12.5 10.5ZM18.75 12C19.1641 12 19.4999 12.3359 19.5 12.75C19.5 13.1642 19.1642 13.5 18.75 13.5H16.25C15.8358 13.5 15.5 13.1642 15.5 12.75C15.5001 12.3359 15.8359 12.0001 16.25 12H18.75ZM12.5 12C12.224 12.0001 12.0001 12.224 12 12.5C12 12.7761 12.2239 13 12.5 13C12.7761 13 13 12.7762 13 12.5C12.9999 12.224 12.7761 12 12.5 12Z" 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/form_multiple_collection_24_regular.svg";

Details