Edit Person icon
Used in editing/update or drawing scenarios. The Edit Person 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 Edit Person 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 { EditPerson24Regular, EditPerson24Filled } from "@fluentui/react-icons";
export function Example() {
return <EditPerson24Regular aria-label="Edit Person" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_edit_person_24_regular.svg" width="24" height="24" alt="Edit Person"> 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="M20.9519 3.0481C19.5543 1.65058 17.2885 1.65064 15.8911 3.04825L3.94103 14.9997C3.5347 15.4061 3.2491 15.9172 3.116 16.4762L2.02041 21.0777C1.96009 21.3311 2.03552 21.5976 2.21968 21.7817C2.40385 21.9659 2.67037 22.0413 2.92373 21.981L7.52498 20.8855C8.08418 20.7523 8.59546 20.4666 9.00191 20.0601L14.2528 14.8086C14.0898 14.4043 14 13.9626 14 13.5C14 13.2907 14.0184 13.0856 14.0536 12.8864L7.94119 18.9995C7.73104 19.2097 7.46668 19.3574 7.17755 19.4263L3.76191 20.2395L4.57521 16.8237C4.64402 16.5346 4.79168 16.2704 5.00175 16.0603L15 6.06084L17.9394 9.00018L16.886 10.0537C17.0853 10.0184 17.2905 10 17.5 10C17.9625 10 18.4041 10.0897 18.8082 10.2527L20.952 8.10861C22.3493 6.71112 22.3493 4.4455 20.9519 3.0481ZM16.9518 4.10884C17.7634 3.29709 19.0795 3.29705 19.8912 4.10876C20.7028 4.9204 20.7029 6.23632 19.8913 7.04801L19 7.93946L16.0606 5.00012L16.9518 4.10884ZM20 13.5C20 14.8807 18.8807 16 17.5 16C16.1193 16 15 14.8807 15 13.5C15 12.1193 16.1193 11 17.5 11C18.8807 11 20 12.1193 20 13.5ZM22 18.875C22 20.4315 20.7143 22 17.5 22C14.2857 22 13 20.4374 13 18.875V18.772C13 17.7929 13.7937 17 14.7727 17H20.2273C21.2063 17 22 17.793 22 18.772V18.875Z" 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/edit_person_24_regular.svg";Details
| Name | Edit Person |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_edit_person_24_regular.svg |
| Filled file | ic_fluent_edit_person_24_filled.svg |
| React components | EditPerson24Regular, EditPerson24Filled |
| License | MIT (© Microsoft Corporation) |