Person Settings icon
Used in a wide range of setting scenarios. The Person Settings icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 2 sizes from 16 to 20 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Every size and style
Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.
Regular, 16 px
ic_fluent_person_settings_16_regular.svg
Person Settings icon in React
npm install @fluentui/react-icons
import { PersonSettings16Regular } from "@fluentui/react-icons";
export function Example() {
return <PersonSettings16Regular aria-label="Person Settings" />;
}Use the Person Settings 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 { PersonSettings16Regular, PersonSettings16Filled } from "@fluentui/react-icons";
export function Example() {
return <PersonSettings16Regular aria-label="Person Settings" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_person_settings_20_regular.svg" width="20" height="20" alt="Person Settings"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M9 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8M6 6a3 3 0 1 1 6 0 3 3 0 0 1-6 0m-2 5a2 2 0 0 0-2 2c0 1.7.83 2.97 2.13 3.8A9 9 0 0 0 9 18q.62 0 1.21-.06A6 6 0 0 1 9.6 17L9 17a8 8 0 0 1-4.33-1.05A3.4 3.4 0 0 1 3 13a1 1 0 0 1 1-1h5.6q.27-.54.66-1zm6.64 2.92a2 2 0 0 0 1.43-2.48l-.16-.55q.38-.3.82-.5l.34.36a2 2 0 0 0 2.9 0l.33-.35q.45.22.84.52l-.13.42a2 2 0 0 0 1.46 2.52l.35.09a5 5 0 0 1 0 1.01l-.45.12a2 2 0 0 0-1.43 2.48l.15.55q-.38.3-.82.5l-.34-.36a2 2 0 0 0-2.9 0l-.33.35q-.45-.21-.84-.52l.13-.42a2 2 0 0 0-1.46-2.52l-.35-.09a5 5 0 0 1 0-1.01zm4.86.58a1 1 0 1 0-2 0 1 1 0 0 0 2 0"/></svg>Details
| Name | Person Settings |
|---|---|
| Styles | Regular (outlined), Filled |
| Sizes | 16 px, 20 px |
| Regular (outlined) file | ic_fluent_person_settings_20_regular.svg |
| Filled file | ic_fluent_person_settings_20_filled.svg |
| React (Regular) | PersonSettings16Regular, PersonSettings20Regular |
| React (Filled) | PersonSettings16Filled, PersonSettings20Filled |
| License | MIT (© Microsoft Corporation) |