Person Accounts icon
Used in a wide range of company scenarios - representing a person, a contact, contact lists, sharing, and managing access. The Person Accounts 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 Accounts 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 { PersonAccounts24Regular, PersonAccounts24Filled } from "@fluentui/react-icons";
export function Example() {
return <PersonAccounts24Regular aria-label="Person Accounts" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_person_accounts_24_regular.svg" width="24" height="24" alt="Person Accounts"> 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="M13 14.0503V14.0002H4.25278C3.01076 14.0002 2.00391 15.007 2.00391 16.2491V16.8267C2.00391 17.7195 2.32242 18.583 2.90219 19.2619C4.46849 21.0962 6.8545 22.0013 10.0004 22.0013C10.3579 22.0013 10.7055 21.9896 11.0434 21.9662C11.0149 21.8153 11 21.6595 11 21.5002V20.4658C10.679 20.4895 10.3458 20.5013 10.0004 20.5013C7.26206 20.5013 5.29618 19.7555 4.04287 18.2878C3.69502 17.8805 3.50391 17.3624 3.50391 16.8267V16.2491C3.50391 15.8355 3.83919 15.5002 4.25278 15.5002H11.2081C11.5294 14.7648 12.1944 14.2138 13 14.0503ZM10.0004 2.00488C12.7618 2.00488 15.0004 4.24346 15.0004 7.00488C15.0004 9.76631 12.7618 12.0049 10.0004 12.0049C7.23894 12.0049 5.00036 9.76631 5.00036 7.00488C5.00036 4.24346 7.23894 2.00488 10.0004 2.00488ZM10.0004 3.50488C8.06737 3.50488 6.50036 5.07189 6.50036 7.00488C6.50036 8.93788 8.06737 10.5049 10.0004 10.5049C11.9334 10.5049 13.5004 8.93788 13.5004 7.00488C13.5004 5.07189 11.9334 3.50488 10.0004 3.50488ZM14 15.0003H13.5C12.6716 15.0003 12 15.6719 12 16.5003V21.5002C12 22.3287 12.6716 23.0002 13.5 23.0002H21.5C22.3284 23.0002 23 22.3287 23 21.5002V16.5003C23 15.6719 22.3284 15.0003 21.5 15.0003H21V13.7502C21 12.7837 20.2165 12.0002 19.25 12.0002H15.75C14.7835 12.0002 14 12.7837 14 13.7502V15.0003ZM15.5 13.7502C15.5 13.6122 15.6119 13.5002 15.75 13.5002H19.25C19.3881 13.5002 19.5 13.6122 19.5 13.7502V15.0003H15.5V13.7502Z" 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_accounts_24_regular.svg";Details
| Name | Person Accounts |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_person_accounts_24_regular.svg |
| Filled file | ic_fluent_person_accounts_24_filled.svg |
| React components | PersonAccounts24Regular, PersonAccounts24Filled |
| License | MIT (© Microsoft Corporation) |