People Team Delete icon

Use the People Team Delete 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 { PeopleTeamDelete24Regular, PeopleTeamDelete24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PeopleTeamDelete24Regular aria-label="People Team Delete" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_people_team_delete_24_regular.svg" width="24" height="24" alt="People Team Delete">

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="M17.5 12C20.5376 12 23 14.4624 23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12ZM14.254 10C15.0886 10 15.817 10.4544 16.2054 11.1292C15.672 11.2368 15.1631 11.4096 14.6865 11.6388C14.5649 11.551 14.4154 11.5 14.254 11.5H9.75193C9.33771 11.5 9.00193 11.8358 9.00193 12.25V16.499C9.00193 17.9099 9.97558 19.0934 11.2876 19.4142C11.4604 19.9798 11.7097 20.5128 12.0226 21.0012L12.003 21C9.51712 21 7.50193 18.9848 7.50193 16.499V12.25C7.50193 11.0074 8.50929 10 9.75193 10H14.254ZM15.093 14.9663L15.0238 15.0241L14.9659 15.0934C14.8478 15.2639 14.8478 15.4915 14.9659 15.662L15.0238 15.7312L16.7934 17.5007L15.0264 19.2675L14.9685 19.3367C14.8504 19.5072 14.8504 19.7348 14.9685 19.9053L15.0264 19.9746L15.0956 20.0325C15.2661 20.1506 15.4937 20.1506 15.6642 20.0325L15.7335 19.9746L17.5004 18.2077L19.2694 19.9768L19.3386 20.0347C19.5092 20.1528 19.7367 20.1528 19.9073 20.0347L19.9765 19.9768L20.0344 19.9076C20.1525 19.7371 20.1525 19.5095 20.0344 19.339L19.9765 19.2697L18.2074 17.5007L19.9793 15.7313L20.0371 15.662C20.1552 15.4915 20.1552 15.2639 20.0371 15.0934L19.9793 15.0242L19.91 14.9663C19.7395 14.8482 19.5119 14.8482 19.3414 14.9663L19.2722 15.0242L17.5004 16.7937L15.7309 15.0241L15.6617 14.9663C15.5155 14.865 15.3274 14.8506 15.1693 14.9229L15.093 14.9663ZM7.40645 10.0003C7.01178 10.4116 6.72427 10.9266 6.58881 11.5003L4.25 11.5C3.83579 11.5 3.5 11.8358 3.5 12.25V14.9988C3.5 16.3802 4.61984 17.5 6.00124 17.5C6.20123 17.5 6.39574 17.4765 6.58216 17.4322C6.66687 17.9361 6.82156 18.4167 7.03487 18.864C6.70577 18.953 6.35899 19 6.00124 19C3.79142 19 2 17.2086 2 14.9988V12.25C2 11.0591 2.92516 10.0844 4.09595 10.0052L4.25 10L7.40645 10.0003ZM19.75 10C20.9926 10 22 11.0074 22 12.25L22.0008 12.8104C20.8328 11.6891 19.2469 11 17.5 11L17.2548 11.0045C17.101 10.6291 16.8767 10.2892 16.5995 10.0003L19.75 10ZM18.5 4C19.8807 4 21 5.11929 21 6.5C21 7.88071 19.8807 9 18.5 9C17.1193 9 16 7.88071 16 6.5C16 5.11929 17.1193 4 18.5 4ZM12 3C13.6569 3 15 4.34315 15 6C15 7.65685 13.6569 9 12 9C10.3431 9 9 7.65685 9 6C9 4.34315 10.3431 3 12 3ZM5.5 4C6.88071 4 8 5.11929 8 6.5C8 7.88071 6.88071 9 5.5 9C4.11929 9 3 7.88071 3 6.5C3 5.11929 4.11929 4 5.5 4ZM18.5 5.5C17.9477 5.5 17.5 5.94772 17.5 6.5C17.5 7.05228 17.9477 7.5 18.5 7.5C19.0523 7.5 19.5 7.05228 19.5 6.5C19.5 5.94772 19.0523 5.5 18.5 5.5ZM12 4.5C11.1716 4.5 10.5 5.17157 10.5 6C10.5 6.82843 11.1716 7.5 12 7.5C12.8284 7.5 13.5 6.82843 13.5 6C13.5 5.17157 12.8284 4.5 12 4.5ZM5.5 5.5C4.94772 5.5 4.5 5.94772 4.5 6.5C4.5 7.05228 4.94772 7.5 5.5 7.5C6.05228 7.5 6.5 7.05228 6.5 6.5C6.5 5.94772 6.05228 5.5 5.5 5.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/people_team_delete_24_regular.svg";

Details

Keywords

groupteamorganizationcontactguestxclose