Group List icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.75311 11.996L5.25244 12.007C5.66654 12.0088 6.00076 12.3461 5.99895 12.7603C5.99726 13.14 5.7138 13.4525 5.34761 13.5006L5.24583 13.507L3.4996 13.498V18.999L5.24914 19C5.62873 19 5.94245 19.2821 5.9921 19.6482L5.99895 19.75C5.99895 20.1297 5.71686 20.4435 5.35088 20.4931L5.24914 20.5H2.7498C2.37021 20.5 2.05649 20.2178 2.00684 19.8518L2 19.75V12.7459C2 12.3651 2.28377 12.0507 2.65103 12.0024L2.75311 11.996ZM21.2449 17.5C21.659 17.5 21.9947 17.8358 21.9947 18.25C21.9947 18.6297 21.7126 18.9435 21.3466 18.9931L21.2449 19H7.74848C7.33437 19 6.99868 18.6642 6.99868 18.25C6.99868 17.8703 7.28076 17.5565 7.64673 17.5068L7.74848 17.5H21.2449ZM21.2449 13.5C21.659 13.5 21.9947 13.8358 21.9947 14.25C21.9947 14.6297 21.7126 14.9435 21.3466 14.9931L21.2449 15H7.74848C7.33437 15 6.99868 14.6642 6.99868 14.25C6.99868 13.8703 7.28076 13.5565 7.64673 13.5068L7.74848 13.5H21.2449ZM2.75311 2.5L5.25244 2.51102C5.66654 2.51284 6.00076 2.85011 5.99895 3.26432C5.99726 3.64401 5.7138 3.95656 5.34761 4.00461L5.24583 4.011L3.4996 4.00299V9.49499L5.24914 9.49505C5.62873 9.49505 5.94245 9.77721 5.9921 10.1433L5.99895 10.2451C5.99895 10.6247 5.71686 10.9385 5.35088 10.9882L5.24914 10.9951H2.7498C2.37021 10.9951 2.05649 10.7129 2.00684 10.3468L2 10.2451V3.24999C2 2.86911 2.28377 2.55477 2.65103 2.50644L2.75311 2.5ZM21.2449 8.00431C21.659 8.00431 21.9947 8.34009 21.9947 8.75431C21.9947 9.134 21.7126 9.4478 21.3466 9.49746L21.2449 9.50431H7.74848C7.33437 9.50431 6.99868 9.16852 6.99868 8.75431C6.99868 8.37461 7.28076 8.06082 7.64673 8.01115L7.74848 8.00431H21.2449ZM21.2502 4.00431C21.6643 4.00431 22 4.34009 22 4.75431C22 5.134 21.7179 5.4478 21.3519 5.49746L21.2502 5.50431H7.75377C7.33967 5.50431 7.00397 5.16852 7.00397 4.75431C7.00397 4.37461 7.28605 4.06082 7.65203 4.01115L7.75377 4.00431H21.2502Z" 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_list_24_regular.svg";

Details