Person Support icon
Used in a wide range of support scenarios. The Person Support 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 Person Support 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 { PersonSupport24Regular, PersonSupport24Filled } from "@fluentui/react-icons";
export function Example() {
return <PersonSupport24Regular aria-label="Person Support" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_person_support_24_regular.svg" width="24" height="24" alt="Person Support"> 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="M10.155 14.7734C10.152 14.7662 10.1491 14.7591 10.1461 14.7519C10.0104 14.7147 9.87622 14.6735 9.74386 14.6285C9.74386 14.6285 9.74386 14.6285 9.74386 14.6285C9.74069 14.6274 9.73751 14.6263 9.73433 14.6252C9.26222 14.4638 8.81284 14.2533 8.39229 13.9999C6.35953 12.775 5 10.5463 5 8C5 4.13401 8.13401 1 12 1C15.613 1 18.5867 3.73729 18.9604 7.25118C19.0042 7.66307 18.6642 8 18.25 8C17.8358 8 17.5054 7.66235 17.4496 7.25192C17.0846 4.56822 14.7838 2.5 12 2.5C8.96243 2.5 6.5 4.96243 6.5 8C6.5 10.3965 8.03274 12.435 10.1714 13.1887C10.4826 12.4884 11.1842 12 12 12C13.1045 12 14 12.8954 14 13.9999C14 13.9999 14 13.9999 14 13.9999C14 14.5972 13.7382 15.1335 13.323 15.4999C12.9704 15.8112 12.5073 16 12 16C11.4759 16 10.9988 15.7984 10.6422 15.4685C10.4338 15.2757 10.2665 15.0391 10.155 14.7734ZM7.99723 15.4999C7.25739 15.1043 6.58287 14.6024 5.99411 14.0146C4.87392 14.1429 4.00391 15.0943 4.00391 16.2488V16.8265C4.00391 17.7193 4.32242 18.5827 4.90219 19.2617C6.46849 21.0959 8.8545 22.0011 12.0004 22.0011C15.1457 22.0011 17.5329 21.0962 19.1023 19.2627C19.6838 18.5833 20.0034 17.7185 20.0034 16.8242V16.2488C20.0034 15.0068 18.9966 13.9999 17.7545 13.9999H15.5C15.5 14.5367 15.3792 15.0453 15.1632 15.4999H17.7545C18.1681 15.4999 18.5034 15.8352 18.5034 16.2488V16.8242C18.5034 17.3608 18.3117 17.8797 17.9627 18.2873C16.7063 19.7552 14.7387 20.5011 12.0004 20.5011C9.26206 20.5011 7.29618 19.7553 6.04287 18.2876C5.69502 17.8802 5.50391 17.3621 5.50391 16.8265V16.2488C5.50391 15.8352 5.83919 15.4999 6.25278 15.4999H7.99723ZM8 8C8 5.79086 9.79086 4 12 4C12.9776 4 13.8738 4.35102 14.5689 4.93383C15.4438 5.66758 16 6.76883 16 8C16 9.37806 15.3031 10.5934 14.2426 11.3127C13.6352 10.8053 12.8533 10.5 12 10.5C13.3807 10.5 14.5 9.38071 14.5 8C14.5 6.61929 13.3807 5.5 12 5.5C10.6193 5.5 9.5 6.61929 9.5 8C9.5 9.38071 10.6193 10.5 12 10.5C11.1458 10.5 10.3643 10.8059 9.75762 11.3128C9.16608 10.9117 8.68766 10.3562 8.38018 9.70425C8.13627 9.18695 8 8.60915 8 8Z" 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/person_support_24_regular.svg";Details
| Name | Person Support |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_person_support_24_regular.svg |
| Filled file | ic_fluent_person_support_24_filled.svg |
| React components | PersonSupport24Regular, PersonSupport24Filled |
| License | MIT (© Microsoft Corporation) |