Group icon

Use the Group 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 { Group24Regular, Group24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Group24Regular aria-label="Group" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_group_24_regular.svg" width="24" height="24" alt="Group">

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 7C6.10457 7 7 6.10457 7 5C7 3.89543 6.10457 3 5 3C3.89543 3 3 3.89543 3 5C3 6.10457 3.89543 7 5 7ZM19 7C20.1046 7 21 6.10457 21 5C21 3.89543 20.1046 3 19 3C17.8954 3 17 3.89543 17 5C17 6.10457 17.8954 7 19 7ZM21 19C21 20.1046 20.1046 21 19 21C17.8954 21 17 20.1046 17 19C17 17.8954 17.8954 17 19 17C20.1046 17 21 17.8954 21 19ZM5 21C6.10457 21 7 20.1046 7 19C7 17.8954 6.10457 17 5 17C3.89543 17 3 17.8954 3 19C3 20.1046 3.89543 21 5 21ZM7.95852 5.5C7.9858 5.3374 8 5.17036 8 5C8 4.64936 7.93985 4.31278 7.82929 4H12.5C13.8807 4 15 5.11929 15 6.5V9H17.5C18.8807 9 20 10.1193 20 11.5V16.1707C19.6872 16.0602 19.3506 16 19 16C18.8296 16 18.6626 16.0142 18.5 16.0415V11.5C18.5 10.9477 18.0523 10.5 17.5 10.5H15V12.5C15 13.8807 13.8807 15 12.5 15H10.5V17.5C10.5 18.0523 10.9477 18.5 11.5 18.5H16.0415C16.0142 18.6626 16 18.8296 16 19C16 19.3506 16.0602 19.6872 16.1707 20H11.5C10.1193 20 9 18.8807 9 17.5V15H6.5C5.11929 15 4 13.8807 4 12.5V7.82929C4.31278 7.93985 4.64936 8 5 8C5.17036 8 5.3374 7.9858 5.5 7.95852V12.5C5.5 13.0523 5.94772 13.5 6.5 13.5H9V11.5C9 10.1193 10.1193 9 11.5 9H13.5V6.5C13.5 5.94772 13.0523 5.5 12.5 5.5H7.95852ZM12.5 13.5C13.0523 13.5 13.5 13.0523 13.5 12.5V10.5H11.5C10.9477 10.5 10.5 10.9477 10.5 11.5V13.5H12.5Z" 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/group_24_regular.svg";

Details

Keywords

editcreateungrouptogether