Person Walking icon

Use the Person Walking 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 { PersonWalking24Regular, PersonWalking24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PersonWalking24Regular aria-label="Person Walking" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_person_walking_24_regular.svg" width="24" height="24" alt="Person Walking">

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 3.5C12.1716 3.5 11.5 4.17157 11.5 5C11.5 5.82843 12.1716 6.5 13 6.5C13.8284 6.5 14.5 5.82843 14.5 5C14.5 4.17157 13.8284 3.5 13 3.5ZM10 5C10 3.34315 11.3431 2 13 2C14.6569 2 16 3.34315 16 5C16 5.75204 15.7233 6.43944 15.2661 6.96595L15.2714 6.96911C15.4613 7.07904 15.6311 7.22895 15.781 7.39885C15.871 7.49879 15.9609 7.61872 16.0308 7.72865L17.0001 9.25772C17.0601 9.33767 17.11 9.40763 17.16 9.48758L17.3299 9.75742L19.2584 10.7268C20.3676 11.2865 20.8172 12.6357 20.2676 13.745C19.7181 14.8543 18.3591 15.3141 17.2499 14.7544L14.7818 13.5251C14.6219 13.4452 14.472 13.3552 14.3321 13.2353C14.3321 13.2353 14.2722 13.1753 14.2322 13.1454C14.2322 13.2753 14.2822 13.4152 14.3621 13.5351L15.2015 14.7644C15.5312 15.2541 15.7311 15.8038 15.781 16.3934L16.0109 19.5815C16.1008 20.8207 15.1715 21.9001 13.9324 21.98C12.6834 22.07 11.6142 21.1405 11.5342 19.9013L11.3344 17.123L10.2952 15.8637L8.36662 20.6008C8.0069 21.4703 7.16753 22 6.28819 22L6.24822 21.99C5.96844 21.99 5.67865 21.94 5.39887 21.8201C4.24973 21.3504 3.70015 20.0412 4.16979 18.8919L5.96844 14.4746C5.79856 14.4546 5.6187 14.4046 5.44883 14.3446C4.2897 13.9049 3.71014 12.6057 4.14981 11.4464L5.06911 9.04785C5.06911 9.04785 5.0891 8.99788 5.09909 8.97789L5.6187 7.61872C5.86851 6.95912 6.4181 6.45942 7.09758 6.25954L9.34588 5.59994C9.37586 5.58995 9.40584 5.58245 9.43581 5.57495C9.46579 5.56746 9.49577 5.55996 9.52575 5.54997C9.54573 5.54997 9.56572 5.54997 9.5957 5.53998C9.74574 5.50996 9.89577 5.49685 10.0416 5.50064C10.0142 5.33783 10 5.17058 10 5ZM10.2155 7.02763C10.0812 6.99014 9.93911 6.99081 9.8052 7.02958L7.50539 7.6954C7.27939 7.76082 7.09719 7.92851 7.01328 8.14832L5.54952 11.9825C5.40454 12.3623 5.5885 12.7884 5.96433 12.9434C6.34015 13.0983 6.771 12.9256 6.9358 12.554L8.16232 9.78833C8.28569 9.51014 8.59303 9.36296 8.8871 9.44125C9.24672 9.53698 9.44108 9.92623 9.30151 10.2712L8.44025 12.4001L5.55582 19.4666C5.39928 19.85 5.58327 20.2878 5.96676 20.4444C6.35026 20.6009 6.78804 20.4169 6.94458 20.0334L9.14602 14.6402C9.51875 13.9144 10.5165 13.8041 11.038 14.4379L12.7185 16.4804C12.7514 16.5204 12.7711 16.5697 12.7748 16.6214L13.0021 19.8034C13.0316 20.2166 13.3905 20.5276 13.8036 20.4981C14.2168 20.4686 14.5278 20.1097 14.4983 19.6966L14.271 16.5145C14.2484 16.1982 14.1404 15.8949 13.9596 15.6364C13.9577 15.6334 13.9557 15.6303 13.9538 15.6273C13.9515 15.624 13.9492 15.6206 13.9469 15.6172L13.1078 14.3892C12.6923 13.7812 12.6006 13.0083 12.8624 12.32L13.1068 11.6773L13.3721 11.142C13.4055 11.0748 13.4493 11.0133 13.502 10.9598C13.7959 10.6614 14.2744 10.6863 14.539 10.9904L15.1168 11.9016C15.1898 12.0168 15.2928 12.1098 15.4148 12.1708L17.9148 13.4208C18.2853 13.6061 18.7358 13.4559 18.921 13.0854C19.1063 12.7149 18.9561 12.2644 18.5856 12.0792L16.275 10.9239L15.8804 10.2898C15.8427 10.2294 15.8028 10.1715 15.7607 10.1162L14.7282 8.4878C14.6289 8.33121 14.4751 8.21695 14.2965 8.16708L10.2155 7.02763Z" 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_walking_24_regular.svg";

Details

Keywords

walkmoveperson