People List icon
Used in a wide range of scenarios - representing a general group, contacts, contact lists, sharing, and managing access. The People List icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the People 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 { PeopleList24Regular, PeopleList24Filled } from "@fluentui/react-icons";
export function Example() {
return <PeopleList24Regular aria-label="People List" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_people_list_24_regular.svg" width="24" height="24" alt="People 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="M5.5 8C5.5 6.61929 6.61929 5.5 8 5.5C9.38071 5.5 10.5 6.61929 10.5 8C10.5 9.38071 9.38071 10.5 8 10.5C6.61929 10.5 5.5 9.38071 5.5 8ZM8 4C5.79086 4 4 5.79086 4 8C4 10.2091 5.79086 12 8 12C10.2091 12 12 10.2091 12 8C12 5.79086 10.2091 4 8 4ZM15.5 9C15.5 8.17157 16.1716 7.5 17 7.5C17.8284 7.5 18.5 8.17157 18.5 9C18.5 9.82843 17.8284 10.5 17 10.5C16.1716 10.5 15.5 9.82843 15.5 9ZM17 6C15.3431 6 14 7.34315 14 9C14 10.6569 15.3431 12 17 12C18.6569 12 20 10.6569 20 9C20 7.34315 18.6569 6 17 6ZM4.25 14C3.00736 14 2 15.0074 2 16.25V16.5011L2 16.5022L2.00001 16.5048L2.00007 16.5111L2.00035 16.5277C2.00064 16.5406 2.00117 16.5571 2.0021 16.5771C2.00396 16.6169 2.00745 16.6705 2.01398 16.7358C2.02701 16.8661 2.05233 17.045 2.10165 17.2564C2.19995 17.6776 2.39654 18.2404 2.79183 18.8051C3.61066 19.9749 5.17178 21 8 21C9.81853 21 11.1132 20.5762 12.0235 19.9626C12.0853 19.5883 12.2659 19.2541 12.5253 19C12.2357 18.7162 12.0443 18.3327 12.0068 17.905C11.9978 17.9183 11.9886 17.9316 11.9793 17.9449C11.4857 18.6501 10.4218 19.5 8 19.5C5.57822 19.5 4.51434 18.6501 4.02067 17.9449C3.75971 17.5721 3.62818 17.1974 3.56241 16.9155C3.5297 16.7753 3.514 16.6612 3.50653 16.5865C3.50281 16.5493 3.50117 16.5222 3.50047 16.5072L3.5 16.4947V16.25C3.5 15.8358 3.83579 15.5 4.25 15.5H11.75C11.8475 15.5 11.9406 15.5186 12.026 15.5524C12.0089 15.4542 12 15.3531 12 15.25C12 14.8116 12.1612 14.4109 12.4276 14.1038C12.2137 14.0364 11.9861 14 11.75 14H4.25ZM12.5253 16.5C12.5162 16.5089 12.5073 16.5178 12.4984 16.5269L12.4995 16.5072L12.5 16.4946V16.4747C12.5083 16.4832 12.5168 16.4917 12.5253 16.5ZM13.75 14.5C13.3358 14.5 13 14.8358 13 15.25C13 15.6642 13.3358 16 13.75 16H21.25C21.6642 16 22 15.6642 22 15.25C22 14.8358 21.6642 14.5 21.25 14.5H13.75ZM13.75 17C13.3358 17 13 17.3358 13 17.75C13 18.1642 13.3358 18.5 13.75 18.5H21.25C21.6642 18.5 22 18.1642 22 17.75C22 17.3358 21.6642 17 21.25 17H13.75ZM13.75 19.5C13.3358 19.5 13 19.8358 13 20.25C13 20.6642 13.3358 21 13.75 21H21.25C21.6642 21 22 20.6642 22 20.25C22 19.8358 21.6642 19.5 21.25 19.5H13.75Z" 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/people_list_24_regular.svg";Details
| Name | People List |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_people_list_24_regular.svg |
| Filled file | ic_fluent_people_list_24_filled.svg |
| React components | PeopleList24Regular, PeopleList24Filled |
| License | MIT (© Microsoft Corporation) |