Form Multiple icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M6 12.25C6 11.0074 7.00736 10 8.25 10C9.49264 10 10.5 11.0074 10.5 12.25C10.5 13.4926 9.49264 14.5 8.25 14.5C7.00736 14.5 6 13.4926 6 12.25ZM8.25 11.5C7.83579 11.5 7.5 11.8358 7.5 12.25C7.5 12.6642 7.83579 13 8.25 13C8.66421 13 9 12.6642 9 12.25C9 11.8358 8.66421 11.5 8.25 11.5Z" fill="currentColor"/>
<path d="M11.5 12.25C11.5 11.8358 11.8358 11.5 12.25 11.5H14.75C15.1642 11.5 15.5 11.8358 15.5 12.25C15.5 12.6642 15.1642 13 14.75 13H12.25C11.8358 13 11.5 12.6642 11.5 12.25Z" fill="currentColor"/>
<path d="M6 7.75C6 7.33579 6.33579 7 6.75 7H14.75C15.1642 7 15.5 7.33579 15.5 7.75C15.5 8.16421 15.1642 8.5 14.75 8.5H6.75C6.33579 8.5 6 8.16421 6 7.75Z" fill="currentColor"/>
<path d="M6.25 3C4.45507 3 3 4.45507 3 6.25V15.25C3 17.0449 4.45507 18.5 6.25 18.5H15.25C17.0449 18.5 18.5 17.0449 18.5 15.25V6.25C18.5 4.45507 17.0449 3 15.25 3H6.25ZM4.5 6.25C4.5 5.2835 5.2835 4.5 6.25 4.5H15.25C16.2165 4.5 17 5.2835 17 6.25V15.25C17 15.4812 16.9552 15.7018 16.8738 15.9038C16.6781 16.3892 16.2712 16.7667 15.7669 16.9224C15.6035 16.9728 15.4299 17 15.25 17H6.25C6.06985 17 5.89607 16.9728 5.73252 16.9222C5.22831 16.7664 4.82149 16.3888 4.62602 15.9033C4.54474 15.7015 4.5 15.481 4.5 15.25V6.25Z" fill="currentColor"/>
<path d="M8.74995 21.0002C7.59927 21.0002 6.58826 20.4022 6.01074 19.5H8.72444L8.74995 19.5002H15.7499C17.821 19.5002 19.5 17.8212 19.5 15.7502V6.01108C20.402 6.58861 21 7.59956 21 8.75017V15.7502C21 18.6497 18.6494 21.0002 15.7499 21.0002H8.74995Z" 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_24_regular.svg";

Details

Keywords

surveysuggestionfeedback