People Interwoven icon

Use the People Interwoven 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 { PeopleInterwoven24Regular, PeopleInterwoven24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PeopleInterwoven24Regular aria-label="People Interwoven" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_people_interwoven_24_regular.svg" width="24" height="24" alt="People Interwoven">

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="M7.47956 10.3846C8.61644 10.3848 9.54803 10.8597 10.3331 11.368C10.7199 11.6185 11.107 11.9024 11.4532 12.1454C11.8117 12.3969 12.1476 12.619 12.4844 12.7957C12.6496 12.8783 12.8465 13.0258 13.0401 13.0155C13.0881 13.0128 13.2817 12.989 13.6085 12.5955L14.5499 11.2928C15.6752 10.0556 17.7534 10.0751 18.8438 11.3983L22.2628 15.5838C22.534 16.047 22.5633 16.6042 22.3604 17.0907L22.2393 17.328C21.7998 18.0462 21.1082 19.1947 20.1954 20.158C19.2887 21.1147 18.0565 22.0035 16.5206 22.0037C15.3841 22.0034 14.4519 21.5295 13.6671 21.0213C13.2801 20.7707 12.8921 20.4859 12.546 20.243C12.2773 20.0545 12.0214 19.8811 11.7686 19.7323L11.5147 19.5916C11.1932 19.423 11.0848 19.3663 10.96 19.3729C10.9103 19.3758 10.7118 19.4013 10.3799 19.8055L9.66315 20.8289L9.66218 20.8309C8.6724 22.2361 6.6012 22.3862 5.38777 21.2362L1.89363 17.0282C1.42445 16.4581 1.38685 15.6717 1.76081 15.0604L2.13679 14.451C2.55949 13.7801 3.11903 12.9531 3.80378 12.2303C4.71045 11.2735 5.9434 10.3848 7.47956 10.3846ZM7.47956 11.87C6.54477 11.8701 5.67875 12.414 4.88386 13.2528C4.14988 14.0274 3.5855 14.9322 3.02742 15.8358C2.97499 15.9218 2.98444 16.0157 3.03913 16.0829L6.3028 20.0438L6.4112 20.161C6.9853 20.7001 7.99167 20.62 8.44636 19.9754L12.3702 14.3807C12.1684 14.3102 11.9821 14.2127 11.795 14.1112C11.3698 13.8881 10.97 13.6203 10.6007 13.3612C10.219 13.0934 9.88154 12.8447 9.52546 12.6141C8.82361 12.1597 8.18689 11.8701 7.47956 11.87ZM17.6964 12.3436C17.15 11.681 16.0369 11.7241 15.5518 12.411L15.5538 12.412L14.9942 13.2088L15.003 13.2147L11.6387 18.0106C11.9032 18.1039 12.1055 18.2239 12.2051 18.2762L12.5196 18.452C12.828 18.6334 13.1218 18.833 13.3985 19.0272C13.7801 19.295 14.1177 19.5427 14.4737 19.7733C15.1756 20.2278 15.8133 20.5171 16.5206 20.5174C17.4552 20.5172 18.3215 19.9741 19.1163 19.1356C19.9046 18.3035 20.5199 17.2901 20.9717 16.5516C21.0125 16.4589 21.0118 16.3933 20.96 16.3055L17.6964 12.3436ZM7.00007 3C8.65688 3.00005 10.0001 4.34318 10.0001 6C10.0001 7.65682 8.65688 8.99995 7.00007 9C5.34327 8.99994 4.00007 7.65682 4.00007 6C4.00007 4.34318 5.34327 3.00006 7.00007 3ZM17.0001 3C18.6569 3.00005 20.0001 4.34318 20.0001 6C20.0001 7.65682 18.6569 8.99995 17.0001 9C15.3433 8.99994 14.0001 7.65682 14.0001 6C14.0001 4.34318 15.3433 3.00006 17.0001 3ZM7.00007 4.5C6.17169 4.50006 5.50007 5.17161 5.50007 6C5.50007 6.82839 6.17169 7.49994 7.00007 7.5C7.82845 7.49995 8.50007 6.82839 8.50007 6C8.50007 5.17161 7.82845 4.50005 7.00007 4.5ZM17.0001 4.5C16.1717 4.50006 15.5001 5.17161 15.5001 6C15.5001 6.82839 16.1717 7.49994 17.0001 7.5C17.8284 7.49995 18.5001 6.82839 18.5001 6C18.5001 5.17161 17.8284 4.50005 17.0001 4.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_interwoven_24_regular.svg";

Details