Edit Arrow Back icon
Used in editing/update scenarios. The Edit Arrow Back 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 Arrow Back 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 { EditArrowBack24Regular, EditArrowBack24Filled } from "@fluentui/react-icons";
export function Example() {
return <EditArrowBack24Regular aria-label="Edit Arrow Back" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_edit_arrow_back_24_regular.svg" width="24" height="24" alt="Edit Arrow Back"> 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="M15.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.0601L10.1531 18.9088C10.0528 18.4552 10 17.9838 10 17.5C10 17.3026 10.0088 17.1073 10.026 16.9144L7.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.00018L15.9137 11.0261C16.1068 11.0088 16.3024 11 16.5 11C16.9835 11 17.4547 11.0528 17.9081 11.1529L20.952 8.10861C22.3493 6.71112 22.3493 4.4455 20.9519 3.0481C19.5543 1.65058 17.2885 1.65064 15.8911 3.04825ZM19.8912 4.10876C20.7028 4.9204 20.7029 6.23632 19.8913 7.04801L19 7.93946L16.0606 5.00012L16.9518 4.10884C17.7634 3.29709 19.0795 3.29705 19.8912 4.10876ZM22 17.5C22 20.5376 19.5376 23 16.5 23C13.4624 23 11 20.5376 11 17.5C11 14.4624 13.4624 12 16.5 12C19.5376 12 22 14.4624 22 17.5ZM15.3536 15.3536C15.5488 15.1583 15.5488 14.8417 15.3536 14.6464C15.1583 14.4512 14.8417 14.4512 14.6464 14.6464L13.1464 16.1464C12.9512 16.3417 12.9512 16.6583 13.1464 16.8536L14.6464 18.3536C14.8417 18.5488 15.1583 18.5488 15.3536 18.3536C15.5488 18.1583 15.5488 17.8417 15.3536 17.6464L14.7071 17H16.75C17.9926 17 19 18.0074 19 19.25V19.5C19 19.7761 19.2239 20 19.5 20C19.7761 20 20 19.7761 20 19.5V19.25C20 17.4551 18.5449 16 16.75 16H14.7071L15.3536 15.3536Z" 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_arrow_back_24_regular.svg";Details
| Name | Edit Arrow Back |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_edit_arrow_back_24_regular.svg |
| Filled file | ic_fluent_edit_arrow_back_24_filled.svg |
| React components | EditArrowBack24Regular, EditArrowBack24Filled |
| License | MIT (© Microsoft Corporation) |